Currently utilizing Vue2, Vuetify, and the Vue Composition API (@vue/composition-api). Encountering an issue with the reactivity of the composition API.
Let's delve into some code snippets:
---- companies.vue ----
<template>
...
<v-data-table
:headers="companiesHeaders"
:items="companies"
:loading="loadingCompanies"
/>
...
</template>
<script>
...
import { useCompanies } from '@/use/companies'
export default {
setup: (_, props) => {
...
const {
companies,
loadingCompanies,
getCompanies
} = useCompanies(context)
onMounted(getCompanies)
return {
...,
companies,
loadingCompanies
}
}
}
</script>
---- @/use/companies.ts ----
import { ref } from '@vue/composition-api'
export const useCompanies = (context: any) => {
const { emit, root } = context
const companies = ref([])
const loadingCompanies = ref(false)
const getCompanies = async () => {
if (loadingCompanies.value) { return }
try {
loadingCompanies.value = true
companies.value = (await root.$repositories
.companies.getCompanies()).data
console.log(companies.value)
// The log successfully displays the company list upon reception
// However, post-async function completion, companies and loadingCompanies fail to update automatically
} catch (err) {} finally {
loadingCompanies.value = false
}
}
return {
companies,
loadingCompanies
}
}
Experimented with both ref and reactive, yet encountering issues with reactivity within companies.vue components.