vue项目打开弹窗清空上次已经填写的内容？

Question

项目使用vue+element搭建的，页面中会有很多需要输入内容的弹出框，如图：

比如我输入到一半把弹窗关闭，再打开的话怎么简单快速的清空之前填写的内容，难道真的要把每个框的值重置一遍吗？
类似这种:

this.input1 = ''
this.input2 = ''
this.input3 = ''
this.input4 = ''
this.input5 = ''
this.input6 = ''
this.input7 = ''

感觉应该会有简单的方法吧。请指教

Answer 1

你看一下那个弹框是不是在一个form表单里，表单的清空重置方式，你懂的

Answer 2

仔细看文档，form表单里面有相关方法

Answer 3

一, 重置, 即数据初始化处理
二, 重新创建, 即弹窗重新创建

Answer 4

官方文档传送门
使用这个方法需要注意一点的是，你表单的数据一定要足够标准才行，并且你需要清空的数据，都必须在那个传入进去的data Objective 里面。

<el-form :model="data">
    <el-input v-model="aaa"></el-input>
</el-form>

像这样，只能清空data里面的值，这里绑定的aaa就不能得到清空

Answer 5

// http://json2ts.com/
class FormModel {
  public prop1: string = null;
  public prop2: number = 1;
  public prop3: boolean = true;
  public prop4: number[] = [1];
}

---

<el-form :model="item">
  <el-form-item>
    <el-input v-model="item.prop1"></el-input>
  </el-form-item>
  <el-form-item>
    <el-input v-model.number="item.prop2"></el-input>
  </el-form-item>
  <el-form-item>
    <el-switch v-model="item.prop3"></el-switch>
  </el-form-item>
</el-form>

---

methods: {
  init() {
    this.item = new FormItem();
  }
}

Answer 6

我一般使用深拷贝，点击弹窗确定赋值