question
When working on a project recently, I usually add a resetFields in the dialog component callback close to reset the initial value and check
There is no problem in other places. There is a problem in the table component. Later, after monitoring vue tools and viewing resetFields, the formData has not changed, and finally found the reason.
solve
1. Use the dialog to [Add] and [Modify] data.
2. Click [Modify] first, and a pop-up window will pop up. At this time, the form of the pop-up window has been assigned a value.
3. Then click the Add button, and then call the resetFields() method There is no way to clear the form
If you just write directlythis.$refs.formRef.resetFields()
Because the editing operation has data echo, the data echo is rendered in the mounted stage,
And resetFields is to reset the form form to the initial value, and this initial value is the value after the form form is mounted
As a result, the validation can only be cleared, and the form cannot be reset to the initial value we want
so directlythis.$data.roleFrom=JSON.parse(JSON.stringify(this.$options.data().roleFrom))
Deep copy roleForm yeah! Done
extended
Why are my other pages okay? I later went to see why the data echo of the dialog of other components is okay, because I used watch to perform rendering according to the change of id in other components, and every time the dialog close is called back, I will actively clear the id to Empty string, exactly if the interface id is an empty string, the request will also be sent, and the obtained data does not correspond to the echoed value, so it is empty. In essence, the request is resent, but it is precisely because the data does not correspond to the display, which causes the correct appearance of the data being empty during the add operation.
Generally speaking, it is still not rigorous. I want to modify the code here. Adding an if here means that it will be reset every time it is closed, but it does not need to be reset when it is opened.
① Subcomponent watch if newVal===" " The above form reset method (here I deliberately added a space for the empty string to see clearly, and the actual reset does not need to add spaces)
② Add an isEdit=false to the dialog close callback of the parent component to prevent repeated sending of ajax when the watch id of the child component changes to an empty character
add a supplement
Another point is that if you use ajax to get data every time, then you get a new address object, just because some of my data uses the reference data that already exists locally, so this happens, so everyone uses references You must pay attention to the data. If you find a relationship and affect the business, make a deep copy of it.