计算属性不更新 vue

Question

我正在尝试将 a.js 文件中的异步 function 中的 object 数组传递给 a.Vue 文件，并在其中通过计算属性获取它。 不幸的是，它不起作用。 我想问一下我该如何解决这个问题

模型列表.js 文件

export default function(vm) {
  let modelList = []

  const getList = async () => {
    const data = await crud('model').list()
    modelList = data

 }

  getList()

  return {
   ...,
   tableList: modelList
  }
}

表.Vue 文件

<template>...</template>
<script>
...
data: () => ({
  ...
}),
computed: {
  ...,
  tableList() {
    return this.table.tableList
  }
},
</script>

Model.vue 文件

<template>
  <Table v-bind="{tableList}" />
</template>

<script>
  import modelList from '../../meta/modelList'
  export default {
    ...,
  components: {
    Table
  },
  computed: {
    tableList () {
      return modelList
</script>

流程是 ModelList.js 由 Model.vue 导入。 Model.vue 将其传递给 Table.vue

当我尝试在 .js 文件中打印 modelList 时，它显示了正确的数据。 但是当我尝试在.Vue文件中打印它时，它显示null。

Answer 1

首先，通过在data中声明它来使您的数组具有反应性。

data: () => ({
  modelList: []
}),

接下来，在收到数据后更新反应数组。 将方法放入组件中。

methods: {
 async getList() => {
    this.modelList = await crud('model').list()
 }

}

您还可以通过在Vuex store中声明数据，或使用组合 API 和 Vue3（或 Vue2 作为插件）中的setup()方法来使数据具有响应性。

最后，在模板中引用反应数组。

<template>
  <Table :tableList="modelList" />
</template>