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拷貝得到的是這個對象的引用。這個對象的任何變化，都會反映到目標對象上面。