[Vuejs]-Vue.js emit, pass array to child,map the array in child and emit event to parent, developer tool shows array is updated but the page not updated

by

0👍

can you try this instead of this.drinks[index] = "Sold Out" :

this.drinks = this.drinks.map((k,idx)=> idx === index ? 'Sold Out' : k)

0👍

Arrays are not reactive the way objects are in Vue.js. While just assigning a new value to an objects attribute just like that

someObject.x = 'some value'

it’s not the same for an array and its elements. Just to clarify – yes, you can modify any index of an array but this won’t trigger a re-render in Vue.js because of its reactivity system. If you modify an array by its index you’ve to take care about re-rendering the component yourself.

However, there’s still hope. If you want Vue.js’s reactivity system to take care about re-renders (even for Arrays) you’ve to use Vue.$set as stated in the docs.

So for your example it should be like this.

this.$set(this.drinks, index, 'Sold Out');

This will not only update the array but also toggle your expected re-render.

Leave a comment