如何解决Vue Composition API反应性无法正常工作
我正在使用Vue2,Vuetify,Vue Composition API(@ vue / composition-api) 我面临的问题是成分api反应性无法正常工作。
让我给你看一些代码
---- 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
}
}
我尝试同时使用ref
和reactive
。
但是对公司内部的任何事物都没有反应性。vue不起作用。
解决方法
我解决了这个问题。 问题在于,公司变量实例是在2个地方(一个用于创建公司对话框,一个用于表)创建的,因此一个地方(创建公司对话框)的更改不会影响到另一个(表)。 谢谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。