0

I am using Vue2, Vuetify, Vue Composition API(@vue/composition-api) The problem I faced is that composition api reactivity doesn't work properly.

Let me show you some code

---- 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)
      // This log works properly. It logs company list once received
      // But even after this async function is finished, companies and loadingCompanies are not updated automatically
    } catch (err) {} finally {
      loadingCompanies.value = false
    }
  }

  return {
    companies,
    loadingCompanies
  }
}

I tried with both ref and reactive. But reactivity for whatever inside companies.vue doesn't work.

2
  • Did you try to check the reactivity of companies without the v-data-table? Can you add a link to CodePen? Sep 9, 2020 at 9:34
  • Thanks @MatanYadaev I already resolved the issue. The issue was that I called useCompanies api in 2 components. One for create company dialog and one for company list page. And I was curious about changes in the dialog doesn't affect to company list page. Now I moved companies variable to out of useCompanies api, so that it can be used as global state. Now it works fine. Sep 10, 2020 at 10:05

1 Answer 1

0

I resolved the issue. The issue was that company variable instance was created in 2 places(one for create company dialog and one for table), so changes in one place(create company dialog) didn't affect to the other(table). Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.