[Vuejs]-V-for loop items not immediately updating in Vue

by

7👍

✅

Vue can’t detect addition/deletion of array items and object properties. Read the Caveats section of the Vue guide, there it gives you some ideas on how to workaround that problem.

Here’s what it says:

Due to limitations in JavaScript, Vue cannot detect the following changes to an array:

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

To overcome caveat 1, both of the following will accomplish the same as vm.items[indexOfItem] = newValue, but will also trigger state updates in the reactivity system:

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

To deal with caveat 2, you can use splice:

example1.items.splice(newLength)
👤JakeParis

Leave a comment