element ui 中的 resetFields() 報錯'resetFields' of undefined


  每次做各種form表單時,首先要注意的是初始化,但是剛開始若沒有仔細看文檔,則會自己寫個方法將數據設置為空,但是這樣就會出現一個問題,表單內存在各種驗證,假如是一個彈框內有form表單,彈框出現就執行上述代碼,可能會出現表單驗證的錯誤提示仍然保留的情況。

element UI 官方文檔提供了一個resetFields()的方法

this.$refs[formName].resetFields()

不僅可以幫你初始化數據,還可以將驗證提示消除!!!

但是在使用時踩了一些坑,

編輯和新增使用了同一個彈出框<el-dialog><el-form></el-form></el-dialog>
綁定了數據data里的commentForm對象
為了在新增彈出框清空表單, 使用了this.$refs[formName].resetFields()
每次第一次點擊新增顯示彈出框,都會報錯
"[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined""

問題原因: mouted加載table數據以后,隱藏的彈出框並沒有編譯渲染進dom里面。

所以@click="dialogFormVisible = true;resetForm('dlgForm')"click彈出的時候$refs並沒有獲取到dom元素導致 'resetFields' of undefined

解決方法:

1、($nextTick dom下一次更新之后)

            resetForm(formName) {
                this.$nextTick(()=>{ this.$refs[formName].resetFields(); }) },

2、(如果是第一次就點擊新增就沒必要reset, 根據元素undefined判斷)

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

注意事項:對DOM一系列的js操作最好都要放進Vue.nextTick()的回調函數中


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM