昨天敲代码的时候遇到这种情况,想要将下列的表单对象值添加进一个表格数组中,同时刷新表格视图,但是修改表单数据时,页面没有及时响应。
表单
表格
最初修改按钮,我是通过直接赋值去做修改的,发现没有效果
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等属性和响应事件