VUE数组内新push的对象中的属性无法修改

 

背景:

　　vue 中页面都正常可以编辑,但是有一个地方,就是无法修改,也无法删除.

  由于该数据是创建的时候,进行选择某个行,进行把值push到数组中

以下代码就会出现无法编辑

this.form.data.push(row);

修改为以下代码后就可以编辑了

   let data = Object.assign({}, JSON.parse(JSON.stringify(row)));
   this.form.data.push(data);

 

Object.assign方法实行的是浅拷贝，而不是深拷贝。如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

const obj1 = {a: {b: 1}}; const obj2 = Object.assign({}, obj1); obj1.a.b = 2; obj2.a.b // 2 

上面代码中，源对象obj1的a属性的值是一个对象，Object.assign拷贝得到的是这个对象的引用。这个对象的任何变化，都会反映到目标对象上面。