I. Introduction
I was in his address that encapsulates a cascade of choice, then every time you want to change the data which, when it is to conduct a separate check, so use the method iview on the part of the form fields validation validateField. In fact, beginning when used without any problem, the cause of the problem is that I have multiple forms, only displays a form, you can switch back and forth, as shown below. I use the v-if controlled forms 2 and Form 3 display and hide, after I filled out the information (2) into information 3, and then click back information when the 2, then being given: TypeError: of Can not the Read Property ' validateField 'of undefined "
Second, the key issue
I wonder why I'm very beginning of the check is good, return to this form it will be wrong, which is a single form validation error too pit of it. Then I printed this. $ Refs. [ 'FormTwo'] found that printing is undefined, that is simply not form validation is a problem, but that absolutely does not find the DOM object.
The key problem is that I used the v-if to control the content of all forms of explicit and implicit, and v-if it's destroyed by a dynamic DOM and constructed to control the explicit and implicit elements. When I re-cut back to form 2, the original DOM has already been destroyed, and this time they have not yet been created.
Third, the solution
1, I think the first way is to use the v-show; v-if is explicit and implicit or not to control the elements by controlling the presence of dom nodes; v-show is to reach the explicit and implicit control by DOM element display styles, before and after there something undefined at the time of writing rich text editing switch, the error is the same reason I use the v-if to control each rich text editor, and later changed to v-show, solve the problem.
In this place, another problem such a change followed by all my forms in the beginning of time have suffered, I know this must be the judge and I do not write about the conditions, but I do not want to change, so with the second solution.
2, nextTick. So I check the form of a single sentence written on the inside of the code, solve the problem - as follows:
this.$nextTick(() => { this.$refs.['formTwo'].validateField('street') });
Fourth, knowledge point
The difference between v-if's and v-show (when using the v-if we must carefully consider the clear!)
How to verify a single table item