vue的数据更新视图不同步的处理
2019-07-26 本文已影响0人
Hsugar
- 在el-table中渲染完接口返回数据
很多情况需要我们对表格一些数据进行修改操作,比如修改价格,然后给表格每一列更新数据
vm.items[indexOfItem] = newValue
会发现数据变化了,但是页面视图并没有更新。因为这时候vue并没有检测到数组的变化。
- vue包装了数个数组操作函数,使用这些方法其数据变动时会被vue监测:
push()
pop()
shift()
unshift()
splice()
sort()
reverse() - vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
filter(), concat(), slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组
vue 不能检测以下变动的数组:
① 当你利用索引直接设置一个项时,vm.items[indexOfItem] = newValue
② 当你修改数组的长度时,例如: vm.items.length = newLength
如我在项目中的实例:
confirmEditAll(){
let that = this;
this.editList.map(d=>{
// d.editPrice = this.editAllPrice 直接修改不会被vue监听
that.$set(d,'editPrice',this.editAllPrice) //vue会检测到
return d;
})
console.log('editList',this.editList)
},