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里还是有些方法不能进行数据绑定的操作的,对这些方法还是要着重看下,理解下
上一篇:ios llvm and clang build tools


下一篇:vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案