vue 数组渲染问题
问题一: 用v-for循环渲染数组数据时,数据更新了,视图却没有更新
由于 JavaScript 的限制, Vue 不能检测以下变动的数组:
1. 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时,例如: vm.items.length = newLength
解决方法:
为了避免第一种情况,以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果, 同时也将触发状态更新:
// Vue.set
Vue.set(example1.items, indexOfItem, newValue) (数组, 索引, 值) // Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue) (索引, 长度, 值)
避免第二种情况,使用 splice:
example1.items.splice(newLength)