前置知识点

1. Event loop
2. 宏任务与微任务

问题描述

第一次访问页面，先进行查看、编辑动作，操作结束退出el-dialog时，el-form绑定的数据与校验信息均无法置空，且后续每次退出时不带值进入，el-form初始值始终为第一次访问页面的值，且非刷新页面无效。

问题代码

// 弹窗
 <el-dialog :visible.sync="dialogShow">
    <el-form ref="refForm" :model="form">
       <el-form-item label="标题" prop="name">
         <el-input v-model="form.name"></el-input>
       </el-form-item>
     </el-form>
 </el-dialog>

// 重置表单信息
 resetForm() {
   this.dialogShow = false;
   this.$refs.refForm.resetFields();
 },
 
// 查看行元素   
skipBtn(row) {
   this.dialogShow = true;
   this.form = JSON.parse(JSON.stringify(row));
},

定位问题

使用排除法

1. 表单上没有添加ref属性？
2. el-form-item没有添加prop属性？

可以看到代码里都有体现，排除代码编写问题，去查看文档，尝试定位是组件在初始渲染过程中保留的初始值问题。

问题分析

借鉴了

1. element-ui的resetFields方法不生效的原因及解决方法
2. 一文搞懂JS系列（六）之微任务与宏任务，Event Loop
3. JavaScript 运行机制详解：再谈Event Loop
   

在页面初始化过程中，若直接对form赋值, 即

this.form = JSON.parse(JSON.stringify(row));

由于Dialog未渲染完毕， 初始值将为第一次对form赋值结果而非空值。

解决办法

知道了问题所在，问题就解决一半了，不多说

show you code

// 查看行元素   
skipBtn(row) {
   this.dialogShow = true;
   this.$nextTick(() => {
   		this.form = JSON.parse(JSON.stringify(row));
   }
},

分析

由于Dialog未渲染完毕，才导致初始值将为第一次对form赋值结果而非空值，那么只需在Dialog渲染结束后才给form赋值就OK了。

这里添加$nextTick，就将赋值过程移出同步任务队列放到微任务队列，当Dialog 渲染完毕后才进行赋值，完美的解决了问题。