【Vue】项目dialog组件数据项清空

你的名字 2024-03-22 13:12 53阅读 0赞

**目录**

一、重置myParams

二、this.$refs\["name"\].resetFields()

1、使用v-if 然后渲染, 无效

2、使用nextTick, 数据显示慢一拍, 重新打开dialog才会显示上次输入的内容

三、复盘-最终方法

--------------------

### 一、重置myParams ###

<el-form
            :model="myParams"
            :rules="rules"
            :inline="true"
            class="is-required"
            ref="myForm"
            label-width="80px"
          >
    </el-form>

openDialog(){
        this.myDialog = true;
        this.myParams = {};
    },

**缺点是z再次打开时, 校验后的红框去除不掉**

### 二、this.$refs\["name"\].resetFields() ###

**使用后初次渲染就会报错: “TypeError: this.$refs\[formName\] is undefined“**

![ddee2b1fc8b3488ba9a504e5e99fb037.png][]

#### 1、使用v-if 然后渲染, 无效 ####

#### 2、使用nextTick, 数据显示慢一拍, 重新打开dialog才会显示上次输入的内容 ####

this.$nextTick(() => {
        this.$refs['form'].resetFields();
    });

### 三、复盘-最终方法 ###

> 数据清空报错, 发现只有第一次渲染才会报错, 后面就正常了,  
> 灵机一动...  
> 第一次打开dialog就不重置了, 这样第一次dom也构建完毕了, 不会存在获取不到的情况, 第二次的时候在使用this.$refs\['myForm'\].resetFields(); 就OK了

**最终代码**

openDialog() {
          this.myDialog = true;
          this.myParams = {};
          this.reset();
          this.isFirst = true;
        },
    
        /**
         * 重置
         */
        reset() {
          if (this.isFirst) {
            this.$refs["myForm"].resetFields();
          }
        },

**疑问、交流、鼓励请留言！**

**靓仔、美女请点赞！**

[ddee2b1fc8b3488ba9a504e5e99fb037.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/8aaa430576d94dc0ab5e4e11edeb9df2.png