Componente principal:
... <v-stepper-step :rules="[()=>isValid(1)]" > MyStep </v-stepper-step> <v-stepper-content> <Mytag ref="MyReference" /> </v-stepper-content> ... methods: { isValid(number){ return mySwitch(number) } mySwitch(number){ let v = false switch(number){ case '1': v = this.$refs.MyReference.$refs.MyTagForm.validate() break } return v } }Componente hijo:
... <v-form ref="MyTagForm" > ... </v-form> ...Siguiente problema: tan pronto como se carga la página, aparece TypeError: no se pueden leer las propiedades de undefined (leyendo '$ refs'). PERO tan pronto como se carga la página y cambio entre pasos, todo con la validación está bien.
Creo que el problema es que la referencia simplemente no existe desde el principio. Traté de usar setInterval y setTimeout alrededor del método en isValid y en mySwitch, pero la validación siempre es falsa.
Espero que alguien de ustedes pueda ayudar.
El problema es que en Vue.js, un componente se procesa a través de un conjunto particular de etapas, por ejemplo, un componente se crea primero antes de montarlo, y está intentando recuperar una referencia a un objeto DOM representado que aún no ha sido renderizado por el marco. En otras palabras, está tratando de recuperar algo que aún no existe (como sospechaba).
Para resolver este problema, debe tener en cuenta que el componente secundario aún no se ha procesado y, en su lugar, optar por aplazar la validación hasta que se haya montado el componente. Una de esas opciones sería hacer que el componente secundario señale al principal cuando se haya montado correctamente y devuelva un valor de validación predeterminado de true o false hasta entonces. Este ejemplo debería ilustrar la idea:
... <v-stepper-step :rules="[()=>isValid(1)]" > MyStep </v-stepper-step> <v-stepper-content> <Mytag ref="MyReference" v-on:ready="childReady = true" /> </v-stepper-content> { ... data() { return { childReady: false } }, methods: { isValid(number){ return mySwitch(number) } mySwitch(number){ // Prevents the normal switch code from running until the child component mounts. if(!this.childReady) { return false; } let v = false switch(number){ case '1': v = this.$refs.MyReference.$refs.MyTagForm.validate() break } return v } } ... <v-form ref="MyTagForm" > ... </v-form> ... { ... mounted() { // The mounted lifecycle hook will signal the "ready" event when this component is rendered, allowing the parent to know that this component has finished rendering. this.$emit('ready'); } }Hay, por supuesto, otras formas en que puede manejar esto, y yo diría que hay múltiples soluciones mucho mejores que la que he ilustrado arriba. Dicho esto, quería mantener esta respuesta simple; Con suerte, lo anterior debería ser suficiente para ayudarlo a comprender cuál es el problema subyacente y brindarle el punto de partida para diseñar mejor la solución que desea en su código.