vue+elementui (reset problem of form form in dialog box)

Reset issue of form form in dialog box

Generally, when adding and editing, the same dialog box and form form form form will be used. When you click edit first, the resetfileds function of the form form will be invalid.

Solution

In fact, the structure is (via vue analogy)

• dataThere is an initial value of a form form.
• methodsDefines a resetfileds function
• resetfiledsFunctions: Record the value of the object in the last form before the mounted life cycle is executed, and restart the validation

The resetfileds function will be executed automatically during the mounted cycle

Actual operation:When the dialog is first opened, the form object is created for the first time and the dom is loaded, that is, the resetfileds function is automatically run (the initial value has been recorded at this time)

Later, when the resetfileds function is called again, the object value recorded in the function will be assigned to the form form. Therefore, if you click to edit first, the form form will not clear the data when clicking to add it.

Solution

1: You can manually clear the data when adding it again (disadvantages: The value recorded in the resetfileds function has not changed at this time, and it is still the value assigned when you first click to edit it, but it does not affect your use)

2: If you want to modify the form object value defined in data when loading the dom for the first time, then you need to place the modification operation after the form form dom element is loaded, that is, after the mounted life cycle (compared with the recommended method)

Code: When loading the dom for the first time, if you want to modify the form object value defined in data, put it in $nextTick (that is, wait for the resetfileds function to execute before assigning the edited or added value to the form form form. In this way, the resetfileds function records the initialization value defined in the form form)

element UI form form reset is invalid

There are two methods resetField and clearValidate in the element component library. However, if you want to use these two methods, you must instantiate a form with ref and reset the form with instantiated objects, but it is often invalid.

Instantiation is

<el-form ref="operateForm" :model="form" :rules="rules">

How to use it is often

this.$refs['operateForm'] && this.$refs['operateForm'].clearValidate()

Say the solution

resetForm() {    //     Note: Reset in this method       = []
       = {
        images: []
      }
    }

Manually reset the form data, and then use the method to reset the rule status

this.$refs['operateForm'] && this.$refs['operateForm'].clearValidate()    
//Notice：Reset before entering the form，My side is a pop-up box，I wrote it in the method to open the pop-up box

The above is personal experience. I hope you can give you a reference and I hope you can support me more.