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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章