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();
      });
    }