Array variation
Vue array contains a set of observed variation method, and
they will also trigger view updates
. These methods are as follows:
push (), pop (), shift (), unshift (), splice (), sort (), reverse (), so that using these methods will promptly triggered arrays variation view updates.
Precautions
Due to JavaScript restriction, Vue array can not detect the following changes:
-
When you set up a key index for direct use, for example: vm.items [index] = newValue
-
When you modify the length of the array, for example: vm.items.length = newLength
In order to solve the first category, the following two methods can be implemented and vm.items [index] = newValue same effect, will also trigger the update:
// Vue.set
//vm.items array object Vue.set (vm.items, index, newValue), the need to modify the object index mark, newValue new target value
//Array.prototype.splice
Alternatively Usage example1.items.splice (indexOfItem, 1, newValue) // splice () method
To solve the second type of problem, you can use splice:
New usage example1.items.splice (newLength) // splice () method
Object Variability
You can add a property to the new age of userProfile nested objects:
Vue.set new value (vm.userProfile, 'age', 27) //vm.userProfile the object to be modified, 'age' modified property, attribute 27
You can also use the vm $ set an instance method, it is just an alias for the global Vue.set:
this.$set(this.userProfile, 'age', 27)
If the article help you, help spot trouble a praise Oh! Hey! Technology bloggers do a fly!