Vue cannot detect changes in array objects

Array:

Because of JavaScript limitations, Vue cannot detect an array of the following changes:

1. When you use an index to set an item directly, for example:vm.items[indexOfItem] = newValue
2. When you modify the length of an array, for example:vm.items.length = newLength

In order to solve the first kind of problem, the following two ways can be achieved and vm.items[indexOfItem] = newValue the same effect, but also trigger the status update:

Vue.set Vue.set (Vm.items, Indexofitem, NewValue)

Array.prototype.splice 1, NewValue)

You can also use vm.$set an instance method, which is Vue.set an alias for the global method:

VMs. $set (Vm.items, Indexofitem, NewValue)

To solve the second type of problem, you can use splice :

Vm.items.splice (Newlength)

Object:

Vue cannot detect the addition or deletion of object properties:

Vue cannot dynamically add a root-level response property to an instance that has already been created. However, you can use Vue.set(object, key, value) methods to add a responsive property to a nested object. For example, for:

New Vue ({ Data: { UserProfile: { ' Anika ' } } })

You can add a new age property to the nested userProfile object:

27)

You can also use vm.$set an instance method, which is just Vue.set a global alias:

27)

Sometimes you may need to assign several new attributes to an existing object, such as use Object.assign() or _.extend() . In this case, you should create a new object with a property of two objects. So, if you want to add a new responsive property, don't look like this:

Object.assign (Vm.userprofile, { 27, ' Vue Green ' })

You should do this:

Object.assign ({}, Vm.userprofile, { 27, ' Vue Green ' })

Vue cannot detect changes in array objects