The vue project opens a pop-up window to clear the contents that have been filled in last time.

if the project is built using vue+element, there will be a lot of pop-up boxes on the page that need to enter content, as shown in figure

clipboard.png

for example, if I close the pop-up window in the middle of the input, and then open it, how can I simply and quickly clear the contents I filled in before? do I really have to reset the value of each box?
something like this:

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

I think there should be an easy way. Please advise

Apr.01,2021

take a look at whether that pop-up box is in a form form. You know,


look carefully at the document. There are related methods in the form form


one, reset, that is, data initialization
two, re-create, that is, pop-up window to recreate


.

official document Portal
one thing to note when using this method is that the data in your form must be standard enough, and the data you need to empty must be in the incoming data Objective.

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

like this, you can only empty the value in data, but the bound aaa cannot be emptied.


// http://json2ts.com/
class FormModel {
  public prop1: string = null;
  public prop2: number = 1;
  public prop3: boolean = true;
  public prop4: number[] = [1];
}
< hr >
<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>
< hr >
methods: {
  init() {
    this.item = new FormItem();
  }
}

I usually use deep copy. Click the pop-up window to determine the assignment

Menu