计算属性不更新 vue答案

【问题标题】：Computed Property not updating vue计算属性不更新 vue
【发布时间】：2021-05-30 11:09:33
【问题描述】：

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

ModelList.js 文件

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

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

 }

  getList()

  return {
   ...,
   tableList: modelList
  }
}

Table.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。

【问题讨论】：

你能展示一下如何将这个 js 文件导入 .vue one 吗？
.js 文件由 Model.vue 导入，Model.vue 文件将其传递给 .Vue 文件。为了清楚起见，我将编辑我的帖子
modelList 是函数，但您将其视为纯对象。我没有看到 modelList() 调用。所以从 Model.vue 中的 tableList 中返回 modelList()
modelList 虽然是一个数组
modelList 是一个函数，它将返回包含 tableList 的对象。导出默认函数(vm) {....}

标签： javascript vue.js vuejs2

【解决方案1】：

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

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

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

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

}

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

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

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

【讨论】：