ResetFields () method of VUE, ELEMENT-UI to reset invalid form problem and solution

$ref[‘ form ‘].resetFields() cannot reset the form item

The ref attribute is not added to the form

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

2. El-form-item does not add prop property. The prop property needs to be the same as the property bound to the input box

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

3. Another common problem is that when using Vuex, the new form is reused with the edit form. In this case, the properties and methods mentioned above can not be added to clear the form.

Let’s revisit the ELEMent-UI documentation at this point

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

When we open the new form, the property value of the form item binding is null. When we open the new form, the value of the form item binding is not null. When we open the new form, the value of the form item binding is not null.

Solution: Reset the method of the bound value after successfully submitting the form

// ResetForm () {return {remark: ' ', name: ' '}} // submit () {//...... Let self = this let query = self.resetForm() self.updateForm() {// This is a custom VUEX action method. Form: query)} self.$ref[' form ']. ResetFields () // ResetFields () is called to clear the form validation error.

Execute the ResetFields method after resetting the property because resetFields may trigger validation of the form rule when the property is reset to null. Executing ResetFields removes the validation result

— — — — — — — — the author: CSDN blogger “just want to be a good man.” the original link: https://blog.csdn.net/haidong…