Vue+elementUI開發中 Cannot read property 'resetFields' of undefined 問題解決以及原因分析

本人開發的系統中有個添加數據與編輯數據的功能。為了減少代碼量，兩者使用了同一個dialog，通過不同按鈕點擊使用對應的方案進行顯示。

對了方便，本人在添加數據的按鈕的click事件中直接寫入了resetFields。

之后正常運行過一段時間，但是就在最近（添加了很多代碼）開始報錯：

TypeError: Cannot read property 'resetFields' of undefined

 

同時我發現，只要顯示過一次dialog，后面就不會報錯了。所以我可以確定是因為代碼量過大，對應的對象來不及生成，從而導致了讀取了空對象。

所以我的解決方法就是：

      resetForm(formName)
      {
       if (this.$refs[formName]!==undefined) {
           this.$refs[formName].resetFields();
       }
      }

通過判斷對象，來避免錯誤（因為只有在新增數據會resetFields，但實際上第一次點擊新增按鈕是不需要執行resetFields的。而之后也不會報錯了，所以這個解決方案剛好適合我）

 

網上有另一個解決方案，但是我試了一下不行

http://www.cnblogs.com/weiqinl/p/6708993.html 

 

俗話說得好，知其然而知其所以然。所以我看以下blog

http://www.cnblogs.com/fly_dragon/p/6220273.html

 

 

經過測試發現在update鈎子執行之后再執行resetFields就不會報錯了。