We often encounter data changes in Vue, but the view cannot be updated, so I have summarized a few such situations:
1. For the array traversed by v-for, when the array content uses arr[0].xx =xx to change the data, vue cannot detect itArray data changes: We use some methods to manipulate arrays, and when changing data, some methods cannot be monitored by Vue, while others can
Vue wraps several array operation functions, and the arrays that are manipulated using these methods will be monitored by Vue when their data changes:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
vue2.0 also adds a method to observe Vue.set(items, indexOfItem, newValue)
filter(), concat(), slice() 。 These do not change the original array, but always return a new array. When using a non-mutation method, you can replace the old array with a new one
Vue cannot detect arrays that change the following:
(1) When you set an item directly with an index, vm.items[indexOfItem] = newValue
(2) When you modify the length of the array, for example: vm.items.length = newLength
Without further ado, upload the code and attach the renderings:
The above are two solutions for arrays that Vue cannot detect data changes
Change the add() method in your code to
List update notes:The hyperlink login is visible.Array update detection
Deep Dive into Responsive Principles:The hyperlink login is visible.
|
Posted on 8/20/2018 1:05:58 PM
|
|
|
|
