Home  >  Article  >  Web Front-end  >  $set and array update methods in vue.js_vue.js

$set and array update methods in vue.js_vue.js

亚连
亚连Original
2018-05-31 17:02:472981browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn