vue绑定数组,更新数组的内容时,view没有更新,多数是因为直接给数组內的数据赋值了,如:
this.student[i].name = "Jack Fung";
这样做vue是不会触发视图更新的。根据vue的官方文档说明:
Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
因此在修改数据后以下方案可以解决:
1. this.student.reverse().reverse();
颠倒数组中元素的顺序,再颠倒。本方法在数据量巨大的时候可能会造成一定的性能损失。
2. this.student.push(0); this.student.pop();
在数组末尾添加一个元素再删除最后一个元素。
另附官方解决方法:
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如: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)