The problem of resetting the form in the elementUI pop-up window not taking effect is solved

The last small module project is completed soon. The most module is relatively simple, and it is a table. There are two buttons at the end of each row of the table, modify and delete, and the new buttons are outside the table. Click the Modify and Add button to pop up a form pop-up window. Modify can echo a row of data into the input box. Originally, there was no problem with echoing anything, but when I tested it myself, I found that I clicked to modify it and then clicked to add it. The data echoed in the input box in the form was not cleared.

The first idea is to click to modify and assign values ​​to the input box, but the form data is not cleared after closing the pop-up window, so the input box data is still there when clicking to add it. So when the pop-up window is closed, clear the form data.

Add an event when closing to the pop-up window:

<el-dialog  title="Popt-up title" :="dialogVisible" width="55%" top="10vh" show-close @close="handleClose">
<!--@close="handleClose" Add a listening event when closing-->

method:{
    handleClose(){
        this.$();
	 = false;
    }
}
//Note: You must add prop attributes and ref attributes to form reset.  Prop attribute binds the value bound to the input box, ref cannot be repeated with other forms

I thought it would be fine if I did this, but when I tested it, I found that I clicked on modifying it and then clicked on adding it. The reset button seemed to have not taken effect, but it seemed to have taken effect. So I checked it up and found out where the problem was.

Say it firstthis.$();What is: Reset the entire form, reset all field values ​​to the initial value and remove the verification result

Note that all field values ​​are reset to the initial value, rather than clearing the value.

What's the difference? For example, what I just made, because the form is in a pop-up window, the pop-up window is closed by default, and the data inside is not initialized. You can open the pop-up window when adding and modifying. If the first click is new, the value in the form is initialized and empty, and empty is the initial value, but if the first click is modify, the initial value in the form is the open echoed data.

This is why resets sometimes take effect but sometimes don't, and sometimes seem to be partially effective.

After finding the reason, you need to find a solution.

//Modify methodamend(code) {
     = true;
    this.$nextTick(() => {
        // Watch here        The following is the echo method
    })
}

this.$nextTick()Delay the callback until execution after the next DOM update loop. Use it immediately after modifying the data, and then wait for the DOM to update. It is the same as the global method, the difference is that this callback is automatically bound to the instance that calls it.

Then click again and find that the problem has been solved.

This is the article about solving the problem of the form reset in the elementUI pop-up window solving. For more related element forms reset in the form, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!