Quickly solve the problem that the reset form of resetFields of method of Vue element ui is invalid

Question:

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

Reason:

1. No ref attribute added to the form

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

2. The prop attribute is not added to the form item el-form-item, and the prop attribute needs to be bound with the attribute 1 of 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="sizeForm.name"></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 edited form. At this time, the above attributes and methods are added and the effect of clearing the form cannot be achieved.

At this point, let's look at the official documents of element-ui again

方法名	说明
resetField	对该表单项进行重置，将其值重置为初始值并移除校验结果
clearValidate	移除该表单项的校验结果

Important: The resetField () method does not reset the form to null, but to the initial value

Therefore, when we open the new form, the property value bound by the form item is empty. After submitting the form, the property value bound by the form item is not empty. When we open the new form again, the last value will appear. At this time, the resetField () method cannot empty the form, because the initial value of the property is not empty during this operation.

Solution:

Method reset the bound value after the form is submitted successfully

//   Reset form item properties 
resetForm () {
  return {
    remark: '',
    name: ''
  }
}
 
//   Re-assign attributes after submitting the form successfully 
submit () {
  //...... Call successful 
  let self = this
  let query = self.resetForm()
  self.updateForm({ // This method is custom vuex Adj. action Method, you can define the reset form method according to the actual application scenario 
    form: query
  )}
  self.$ref['form'].resetFields()  //  Call again at this time resetFields() The method is to clear the errors that occur in form validation 
}

The resetFields method is executed after the property is reset because the validation of the posting rule may be touched when the property is reset to null. Executing resetFields at this time removes the validation result

Additional knowledge: vue+element-ui this. $refs ['']. resetFields () reset form data does not work

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

There are two points to note:

1. Have a corresponding ref with the name 1 indicating which form to reset.

2. The field name set by prop should be the same as the field name bound by v-model, otherwise it will not take effect when resetting the form or making custom validation rules.

Specific verification rules do not need to be filled in when only reset function is used, but the field 1 to be reset must have corresponding prop.