vue 绑定数组,变化无法更新view的解决方法

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)