preface

Because I used the Element-UI framework in the background of the company at the end, the resetFields form could not be reset during the development process. The solution is recorded here, which can also help students to check fewer pits in the future

1. Problem recurrence

Since the “Add” and “Edit” fields are the same, I put them in a single popbox form, which also saves code overhead that you wouldn’t have if you wrote your popboxes separately.

Repeat steps: After entering the list page, open the edit box first, and then open the new box, which will fill the contents of the edit box opened for the first timeCopy the code

First open the edit box

Then open the new box

The @closed method on the form calls resetFields but does not take effectresetForm() {
  this.$refs['form'].resetFields();
},
Copy the code

2. ResetFields () does not take effect

This method is used to set the value of the form to its initial value. This method is used to set the value of the form to its initial value. ResetFields () is invalid if the form is assigned a value before Mounted, because the initial value of the form is already assigned before Mounted

3. Solutions

If the form mounted is mounted, use the “this.$nextTick” method when editing the assignment. The code! Method of opening popover before modification:

onShow(type, row) {
  this.visible = true;
  if (type= = ='create') {
    this.dialogTitle = 'add XX';
  } else if (type= = ='update') {
    this.dialogTitle = 'edit XX'; this.form.name = row.name; this.form.des = row.des; }},Copy the code

Modified popover opening method:

onShow(type, row) {
  this.visible = true;
  if (type= = ='create') {
    this.dialogTitle = 'add XX';
  } else if (type= = ='update') {
    this.dialogTitle = 'edit XX';
    this.$nextTick(() => {this.form.name = row.name; this.form.des = row.des; }); }},Copy the code

$refs[‘form’].resetFields(); Will take effect in the