关于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)

问题就此解决

推荐看一下文档 深入响应式原理