vue数组更新界面无变化

1. vue数组更新界面无变化

1.1. 说明

• 对数组进行更新或者添加，一定要注意方式，我的情况是数组套数组，双重循环，在造数据的时候，不断从尾部添加数据，所以写成了如下形式，每次下拉都会去加载一批相同的数据添加到尾部。初步一看好像没啥问题，实际上我碰到的就是有时候成功有时候数据一点没有显示

this.arrList[this.arrList.length] = {};
this.arrList[this.arrList.length-1].dataList = newArr;
this.arrList[this.arrList.length-1].header = 'A幢';

1.2. 解决

• 问题的根源请看这篇

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
    当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
    当你修改数组的长度时，例如：vm.items.length = newLength

• 解决方法请参考上面的链接，我这里给出我的代码的改法

this.arrList[this.arrList.length] = {};
this.$set(this.arrList,this.arrList.length-1,{dataList:newArr,header:'A幢'});

1.3. 总结

• vue里还是有些方法不能进行数据绑定的操作的，对这些方法还是要着重看下，理解下