Detailed explanation of how to update $set and array in vue.js

Due to JavaScript limitations, Vue cannot detect the following changed arrays: when using the index to directly set an item of the array, for example: vm.items[indexOfItem] = newValue

When you modify the length of the array When, 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 new properties are added to the instance after the instance is created, the update will not be triggered.

ps: Now there are two arrays, arr1 and arr2. If arr1 changes the array by assigning a subscript value, and arr2 changes the array by $set, what will the result be?

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.

Related recommendations:

VUE Array Update Detailed Explanation

PHP How to update the array into the database

, method to update mysql database data using array

The above is the detailed content of Detailed explanation of how to update $set and array in vue.js. For more information, please follow other related articles on the PHP Chinese website!