Cannot read property 'resetFields' of undefined 問題及引申

問題描述： 使用element開發我的后台系統，編輯和新增使用了同一個彈出框<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()的回調函數中