H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】Vue重置表单:TypeError: Cannot read property 'resetFields' of …

在使用elementUI时遇到的错误,在网上找了很久,解决办法都没用,官方文档也不够详细。

场景

在对话框关闭或者取消时要重置表单,而Vue编译不通过,网上说是因为form表单未渲染进DOM,导致找不到此表单对象,导致:
"TypeError: Cannot read property 'resetFields' of undefined"
网友提供的解决办法:
如果是第一次非空验证一下:

          if (this.$refs['dictForm'] !== undefined) {
              this.clearForm();//封装了清空操作
          }

或者利用Vue的自带特性(DOM渲染后执行):

        this.$nextTick(()=>{    
        this.$refs.addForm.resetFields(); })

本次解决

试过上述方案后还是没用,那么大概率是代码设计有问题了。
官方提供了一个close的函数(摘自官网):

before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮,那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

由于我理解错误,将close函数与before-close属性混用,导致Vue编译不通过,下边直接贴上代码:
Vue代码:

      <el-dialog
        :title="title"
        :close-on-click-modal="false"//防止误点退出
        :visible.sync="centerDialogVisible"//控制是否显示
        @close="clearForm"//对话框右上角自带的关闭按钮事件
        width="30%"
        center
        >

Js代码:

      clearForm(){
        //隐藏对话框
        this.centerDialogVisible = false;
        //表单验证还原
        if (this.$refs['bookForm'] !== undefined) {
           this.$refs['bookForm'].resetFields();
        }else{
          this.$nextTick(()=>{
            this.$refs['bookForm'].resetFields();
          });
        }
        //还原可编辑
        this.flag = false;
      }

本文地址:H5W3 » 【前端技术】Vue重置表单:TypeError: Cannot read property 'resetFields' of …

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址