Cannot read property ‘resetFields‘ of undefined 问题及解决方法

在Vue.js开发过程中,遇到使用Element UI的弹窗编辑和新增功能时,由于$refs未找到隐藏弹窗的form元素,导致尝试调用'resetFields'方法时出现错误。解决方法是在调用resetFields时使用$nextTick,确保DOM已更新。通过在resetForm方法中包裹$nextTick,可以避免因DOM未及时渲染而引发的错误,确保表单在显示后正确重置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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元素加载完成之后再操作。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值