【解決】element表單動態添加或更新表單項，回顯後無法修改或提示爲空的問題

原方法 

/**
  * 動態更新form
  * @param form
  */
updateForm(form) {
  this.form.manholeId = form.manholeId;
  this.form.manholeName = form.manholeName;
},

調整爲

/**
 * 動態更新form
 * @param form
 */
updateForm(form) {
  this.$set(this.form, "manholeId", form.manholeId);
  this.$set(this.form, "manholeName", form.manholeName);
},

this.$set 詳解

this.$set 是Vue中的一個實例方法，用於在響應式對象上設置新的屬性或修改已有的屬性，並確保這些屬性也是響應式的。

使用 this.$set 可以解決Vue響應式系統的一個限制，即無法檢測到通過索引直接設置數組元素或通過Object.defineProperty添加的屬性的變化，所以通過this.$set 方法，可以顯式地告訴Vue，某個屬性的值已經發生了變化，從而觸發視圖的更新。

一、對象 使用this.$set()，修改和新增

// 定義數據對象：
obj: { name: "小明", age: 18, },        
 
// 基本語法：
this.$set(需要改變的對象，"需要改變的對象屬性"，"新值")
 

1、對象修改

this.$set(this.obj, "name", "小劉"); 
 
控制檯輸出：obj: { name: "小劉", age: 18, },

2、對象新增

this.$set(this.obj, "hobby", "study");
 
控制檯輸出：obj: { name: "小明", age: 18, hobby: "study"},  

3、對象新增未知屬性（這裏的item是傳遞的參數，不帶引號，"reading"是參數值）

this.$set(this.obj, item, "reading");

二、數組 使用this.$set()，修改和新增

// 定義數組包對象：
arr: [                                           
  { name: "小王", age: 18 },
  { name: "小張", age: 20 },
 ],
 
// 定義普通數組：       
twoArr: [11, 22, 33, ],                          
 
// 基本語法：
this.$set(需要修改的數組，需要修改的數組下標，{ "要修改的數組對象，一個/多個" })
 

1、數組修改

// 修改數組對象：
this.$set(this.arr, 1, { name: "小王", age: 19 });
          
控制檯輸出：arr: [ { name: "小王", age: 18 },{ name: "小王", age: 19 }, ],

// 修改普通數組：
this.$set(this.twoArr, 0, 99);    
   
控制檯輸出：twoArr: [99, 22, 33, ],   

2、數組新增

（1）首先需要獲取新增的數組長度：

let reslg = this.arr.length;  

（2）然後添加在數組末尾：

this.$set(this.arr, reslg,{ name: "小紫", age: 18 },);
 
控制檯輸出：
arr: [ 
        { name: "小王", age: 18 },
        { name: "小張", age: 20 },
        { name: "小紫", age: 18 },
     ],

三、同理，執行刪除操作時，對象或數組不更新時可以使用this.$delete

// 基本語法：
 
this.$delete(this.obj, "name")

參考

深入響應式原理：https://v2.cn.vuejs.org/v2/guide/reactivity.html