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就不會報錯了。