Question

我试图将对象数组从 .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。

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>

计算属性未更新 vue

1 个答案: