关于Vue修改数据页面未改变
今天同事遇到一个问题,在修改表格数据后,页面上没有及时渲染出来。
阅读了一下同事的代码,很简单的一个遍历中判断修改,代码片段类似于下面:
for (let i = 0; i < this.list.length; i++) {
if (this.list[i] = this.selectRow.xxx) {
this.list[i].code = code
}
}
这段代码看起来没什么问题,其实了解过vue响应式原理的小伙伴们都会知道 对于已经创建的实例,Vue 不允许动态添加根级别的响应式 property
,所以这种写法vue是不会响应的。
官方文档也写出来了这种情况该如何处理 但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。
this.$set(this.list[i], 'code', code)