Verification Problem Solution Based on element ui Dialog Box el dialog Initialization

When reopening el-dialog without refreshing the page, if we bind rules or a value requires required, it will always automatically check.

After checking several blog posts, I found that there are two commonly used solutions (the following methods can be viewed in other blog posts, and no longer write in detail. If necessary, please inquire by yourself):

1. Put v-if on dialog;

2. When dialog is turned off, listen for the shutdown callback and clear the check.

I used the above two methods in my own project, which are not very easy to use. I figured out another method myself:

< el-dialog @open="openDialog()" >

< /el-dialog >

Calling callbacks opened by dialog

methods:
 
openDialog(){
  this.$nextTick(() => {
    this.$refs.dataForm.clearValidate();
  })
}

When the dialog is initialized, the changed dom is obtained and cleared and verified

Supplementary knowledge: Cannot read property 'resetFields' of undefined problem and its extension

Problem description: Use element to develop my background system, edit and add the same pop-up box < el-dialog > < el-form > < /el-form > < /el-dialog >

Binding commentForm object in data data

To clear the form in the Add pop-up box, use this. $refs [formName]. resetFields ()

Every time you click the new display pop-up box for the first time, an error will be reported

"[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined""

Cause of problem:

After mouted loads table data, the hidden pop-up box is not compiled and rendered into dom.

So @ click = "dialogFormVisible = true;

('dlgForm') "$refs does not get the dom element when click pops up causing 'resetFields' of undefined

Solution:

1. (After the next update of $nextTick dom)

      resetForm(formName) {
        this.$nextTick(()=>{
          this.$refs[formName].resetFields();
        })        
      },

2. (If you click Add for the first time, there is no need for reset, and it is judged according to the element undefined)

        if (this.$refs[formName] !== undefined) {
          this.$refs[formName].resetFields();
        }

Note: js operations on the DOM1 family are best placed in the callback function of Vue. nextTick ()