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

Question

I'm trying to update an array of arrays and rendering it as a reactive variable, but DOM is not reflecting those changes.

For doing this, I'm using 2 components, a parent and a child one:

Parent component Instanciates child component and passes a method (fetchOptionsFn) as a prop, which fetches some data and updates an array located in child component

<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))
      }

Child component Defines an empty array, defines a SELECT in the DOM and when a search on it is done, this array is modified by the parent inherited function.

<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)
    }
}

The problem comes when this funcion is called (fetchSelectEntityOptions), but the array (selectEntityArray) doesn't change in DOM.

Any idea? Thanks!

Answer 1

Seems like you might need to define an index data property in the child component otherwise I'm not sure what/which index is being referred to in the :options="selectEntityArray[index]" attribute. Then you also need to set the index in the fetchSelectEntityOptions function.

So, maybe something like this:

<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);
    }
}

Answer 2

Vue 2 has some Change Detection Caveats you should know...

Vue cannot detect the following changes to an array:

1. When you directly set an item with the index, eg vm.items[indexOfItem] = newValue
2. When you modify the length of the array, eg vm.items.length = newLength

So you need to change the line:

selectOptionsArray[index] = res.data

to:

Vue.set(selectOptionsArray, index, res.data)