{{ object.1 }}{{ object.2 }} {{ object.3 }} I am aware that Vue3 can only d" /> {{ object.1 }}{{ object.2 }} {{ object.3 }} I am aware that Vue3 can only d" /> {{ object.1 }}{{ object.2 }} {{ object.3 }} I am aware that Vue3 can only d"/>

Make Vue3 detect when a key is updated within a dictionary, which is in an array

40 Views Asked by At
<tr v-for="(object,index) in watchingArr" :key="index">
   <span>{{ object.1 }}{{ object.2 }} {{ object.3 }}</span>
</tr>

I am aware that Vue3 can only detect changes in array when size changes, and only if the deep flag is set to true.

However, the deep flag cannot detect when a variables changes.

I see that in Vue2 Vue.set() was a solution, but deprecated now in Vue3.

tl;dr

this.element[newKey] = newVal 
this.$store.dispatch('store/addElement',this.element) <--- Adds element to watchingArr

^ Works because we are adding a new element to the array

this.element[oldKey] = newVal 

^ Does not work because we are only updating the value of the key within the array

By the way, I did check, it does update the actual array, I am sending references to the array and not copies.

SOLUTION:

This specific array was an array of Leaflet.js markers. Since my list was its own Vue3 Component, I attached a Vue3 function to the marker.

...
marker["customFunction"] = this.customFunction
...
},
customFunction(){
(change store variable 'updateList')
}

Then trigger the function on dragend

this.marker.on('dragend', function(event) {
event.target.customFunction
}

=================

On the list component, it would watch the store variable, and this.forceUpdate() to update the list

0

There are 0 best solutions below