javascript - 当 VueJS 中的数据变量更改时，DOM 不会更新

Question

我正在尝试更新数组数组并将其呈现为反应变量，但 DOM 并未反映这些更改。

为此，我使用了 2 个组件，一个父组件和一个子组件：

父组件 实例化子组件并将方法（fetchOptionsFn）作为道具传递，该方法获取一些数据并更新位于子组件中的数组

<component :is="DynamicDataPairForm"
            :fetchOptionsFn="fetchOptionsFn"

fetchOptionsFn (search, loading, selectOptionsArray, index) {
      if (search.length >= 3) {
        pptDocumentLibraryService.findByTitle(search).then(res => {
          selectOptionsArray[index] = res.data
        }).catch(err => console.log(err))
      }

子组件 定义一个空数组，在 DOM 中定义一个 SELECT，当对其进行搜索时，该数组被父继承函数修改。

<tr v-for="(entity,index) in filteredEntityList" :key="entity[entityIdField]">
<v-select
:options="selectEntityArray[index]"
@search="(search, loading) => {
fetchSelectEntityOptions(search, loading, index) }"
/>
</tr>

props: {
 fetchOptionsFn: { type: Function, required: false, default: () => {} },
},
data: {
 selectEntityArray: []
},
methods: {
 fetchSelectEntityOptions (search, loading, index) {
      this.fetchOptionsFn(search, loading, this.selectEntityArray, index)
    }
}

当调用此函数 (fetchSelectEntityOptions) 时会出现问题，但数组 (selectEntityArray) 在 DOM 中没有更改。

任何想法？谢谢！

标签： javascriptvue.jsvuejs2

Answer 1

似乎您可能需要index在子组件中定义一个数据属性，否则我不确定属性index中引用的是什么/哪个:options="selectEntityArray[index]"。然后你还需要在 fetchSelectEntityOptions 函数中设置索引。

所以，也许是这样的：

<v-select
:options="selectEntityArray[index]"
@search="(search, loading) => {
fetchSelectEntityOptions(search, loading, index) }"
/>

props: {
 fetchOptionsFn: { type: Function, required: false, default: () => {} },
},
data: {
 selectEntityArray: [],
 index: null,
},
methods: {
 fetchSelectEntityOptions (search, loading, index) {
      this.index = index;
      this.fetchOptionsFn(search, loading, this.selectEntityArray, index);
    }
}