vue视图刷新失效

昨天敲代码的时候遇到这种情况,想要将下列的表单对象值添加进一个表格数组中,同时刷新表格视图,但是修改表单数据时,页面没有及时响应。

表单

表格

最初修改按钮,我是通过直接赋值去做修改的,发现没有效果

this.array[this.index] = this.materialForm

然后很自然地,我在想应该是vue没有设置监听的原因,于是我用了this.$set()

this.$set(this.array, this.index, this.materialForm)

结果页面是刷新了,但是所有值都不显示了

然后我懵逼了,最后是通过Object.assign()解决的

Object.assign(this.array[this.index], this.materialForm)

略微思考了一下,form表单对象是一个vue监听的对象,array也是vue监听的对象,应该不存在监听问题,怀疑是array中的元素监听的响应事件没有被$set破坏了,而assign只是合并可枚举属性,并不会修改defineProperty等属性和响应事件

原文地址:https://www.cnblogs.com/jiangxiaoxi/p/13405000.html