Quickly solve the problem of invalid resetting form of Vue and element-ui

question:

Cannot reset form item using this.$ref['form'] .resetFields()

reason:

1. No ref attribute was added to the form

<el-form ref="form"></el-form>

2. The form item el-form-item does not add the prop attribute, and the prop attribute needs to be consistent with the attributes bound by the input box.

<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
 <el-form-item label="Activity Name" prop="name">
  <el-input v-model=""></el-input>
 </el-form-item>
</el-form>

3. Another scenario where this problem often occurs is that when using vuex, the new form is reused with the edit form. At this time, the above attributes and methods are added, but the effect of clearing the form cannot be achieved.

Now let's take a look at the official documentation of element-ui again

The point: instead of resetting the form to empty, resetting it to the initial value

So when we open a new form, the property value bound to the form item is empty. After submitting the form, the value bound to the form item is not empty. At this time, the last value will appear when the new form is opened. At this time, the resetField() method cannot clear the form, because during this operation, the initial value of the property is not empty.

Solution:

Method resetting the bound value after the form is submitted successfully

// Reset form item propertiesresetForm () {
  return {
    remark: '',
    name: ''
  }
}
 
// After the form is submitted successfully, the attribute is assigned againsubmit () {
  //...The call is successful  let self = this
  let query = ()
  ({ //This method is a custom vuex action method. You can define the reset form method according to the actual application scenario.    form: query
  )}
  self.$ref['form'].resetFields()  // Calling the resetFields() method at this time is an error that occurs to clear the form verification}

Execute the resetFields method after resetting the property because when resetting the property to empty, verification of the form rule may be triggered. Execution of resetFields at this time will remove the verification result

Supplementary knowledge:vue+element-ui this.$refs[''].resetFields() Reset form data does not take effect

The Form component of element provides the function of form verification. It requires passing in the agreed verification rules through the rules attribute and setting the prop attribute of Form-Item to the field name to be verified.

There are two things to note:

1. There must be a corresponding ref with the same name, indicating which form to reset.

The field name set must be the same as the field name bound by v-model, otherwise it will not take effect when resetting the form or performing custom verification rules.

When using the reset function only, the specific verification rules are not required, but the fields to be reset must have corresponding props.

The above article quickly solves the problem of invalid resetFields() method of Vue and element-ui. This is all the content I share with you. I hope you can give you a reference and I hope you support me more.