Cannot read property 'resetFields' of undefined 问题及解决方法
问题描述: 使用element开发我的后台系统,编辑和新增使用了同一个弹出框
<el-dialog><el-form></el-form></el-dialog>
绑定了数据data里的form对象
为了在新增弹出框清空表单, 使用了this.$refs[formName].resetFields()
每次第一次点击新增显示弹出框,都会报如下错误
问题原因: mouted加载table数据以后,隐藏的弹出框并没有编译渲染进dom里面。
所以当点击弹出窗时$refs 没有找到对应的弹出框元素导致 'resetFields' of undefined
解决方法
1. ($nextTick 等待dom更新之后)
resetForm(formName) { this.$nextTick(()=>{ this.$refs[formName].resetFields(); }) },
注意事项
对DOM一系列的js操作最好都要放进Vue.nextTick()的回调函数中,等待DOM元素加载完成之后再操作。