Home > Article > Web Front-end > $set and array update methods in vue.js_vue.js
Now I will share with you an article about $set and array update methods in vue.js, which has a good reference value and I hope it will be helpful to everyone.
Due to JavaScript limitations, Vue cannot detect the following changed arrays:
When using an index to directly set an item of the array, for example : vm.items[indexOfItem] = newValue
When you modify the length of the array, for example: vm.items.length = newLength, the array will not be updated.
Of course, the solution is given in vue, which is to use Vue.set, vm.$set (a variant of Vue.set) or splice, caoncat, etc. to modify the array, which will also trigger a status update:
ex:
So if you add new properties to the instance after the instance is created, it will not trigger renew.
ps: There are now two arrays, arr1 and arr2. If arr1 changes the array by assigning a subscript value, and arr2 changes the array with $set, what is the result? How about that?
data:{ arr1 = ['a','b','c']; arr2 = [‘foo','bar','baz']; } vm.arr1[1] = 'alpha'; vm.$set(vm.arr2, 1, 'alpha');
According to what we said at the beginning, changing the array based on the subscript index cannot trigger status update. We will know that: the second change of the first array will not be updated on the page, only the change of the second array will Update on page. However, the result is:
arr1 = ['a', 'alpha', 'b', 'c']; arr2 = [‘foo', 'alpha', 'bar','baz'];
The values of both arrays are updated. In other words, when arr2 is updated using the $set() method, the page will be completely updated.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
JQuery selects the selected value method of the select component
Method for code splitting in react-router4 (Based on webpack)
vue.js moves the array position and updates the view at the same time
The above is the detailed content of $set and array update methods in vue.js_vue.js. For more information, please follow other related articles on the PHP Chinese website!