I am facing an issue while trying to update an array of arrays and display it as a reactive variable, however the DOM does not seem to reflect those changes.
To achieve this, I have two components - a parent component and a child component:
Parent Component: The parent component initializes the child component and passes a method (fetchOptionsFn) as a prop. This method fetches data and updates an array located in the 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: The child component defines an empty array, sets up a SELECT element in the DOM, and when a search is performed on it, the array gets modified by the function inherited from the parent.
<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 issue arises when the function fetchSelectEntityOptions is called, but the array selectEntityArray does not change in the DOM.
https://i.stack.imgur.com/IGP2N.png https://i.stack.imgur.com/WBP5V.png
Any suggestions or thoughts on how to resolve this problem would be greatly appreciated!