Parent Component:
...
<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
}
}
Child Component:
...
<v-form
ref="MyTagForm"
>
...
</v-form>
...
Encountering an issue: upon initial page load, a TypeError is thrown "Cannot read properties of undefined (reading '$refs')". However, once the page loads and I change between steps, the validation works correctly.
I suspect that the reference does not exist at the start. I attempted to use setInterval and setTimeout around the isValid and mySwitch methods, but then the validation consistently returns false.
Seeking assistance from anyone who can provide insight on this matter.