Cannot read property 'resetFields' of undefined

我们先了解一下resetFields的作用

方法名说明参数
resetField对该表单项进行重置,将其值重置为初始值并移除校验结果-

我遇到问题的代码

 addDevice () {
                this.title= "【新增】设备管理";
            //打开新增弹窗前先重置表单 避免表单出现上一次新增的校验数据
                this.$refs['form'].resetFields();
            //弹出新增对话框
                this.adddialog = true;
            },

结果浏览器报 Cannot read property 'resetFields' of undefined

原因是在弹数新增能对话框前 form表单并没有编译渲染进dom里面 所以导致this.$refs['form'].resetFields(); 报错 

只需要先弹出form 再重置表单即可避免问题

    addDevice() {
      this.title = '【新增】设备管理';
      // 弹出新增对话框
      this.adddialog = true;
      // 用 this.nextTick 或者用个定时器来确保 dom 渲染并更新
      this.$nextTick(function() {
        // 打开新增弹窗前先重置表单 避免表单出现上一次新增的校验数据
        this.$refs.form.resetFields();
      });
    }

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值