父組件：
...
<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
}
}
子組件：
...
<v-form
ref="MyTagForm"
>
...
</v-form>
...
以下問題：一旦加載頁面，我就會收到 TypeError: Cannot read properties of undefined (reading '$refs')。但是，一旦加載頁面并且我在步驟之間進行更改，驗證的一切都很好。
我認為問題在于參考一開始就不存在。我嘗試在 isValid 和 mySwitch 中的方法周圍使用 setInterval 和 setTimeout - 但隨后驗證始終為假。
我希望你們中的某個人可以提供幫助。
uj5u.com熱心網友回復：
問題在于，在 Vue.js 中，組件是通過一組特定的階段呈現的——例如，在安裝之前首先創建一個組件——并且您試圖檢索對呈現的 DOM 物件的參考尚未由框架呈現。換句話說，您正在嘗試檢索尚不存在的東西（正如您所懷疑的）。
為了解決這個問題，您必須考慮尚未呈現的子組件，而是選擇推遲驗證，直到組件已安裝。一種這樣的選擇是讓子組件在成功安裝后向父組件發送信號，并在此之前回傳默認驗證值true或false。這個例子應該說明這個想法：
...
<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');
}
}
當然，您可以通過其他方式來解決這個問題，我認為有多種解決方案比我上面說明的方法要好得多。也就是說，我想讓這個答案保持簡單；以上應該足以幫助您了解潛在的問題是什么，并為您提供更好地設計您想要的代碼解決方案的起點。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/397815.html
標籤：javascript Vue.js
上一篇：Android Studio修行手冊，快速漲薪-【界面預覽】、【自帶截圖】、【自動排序代碼】、【快速查看界面】和【預覽串列】、【Null判斷】
下一篇：問題系結下拉選擇與VueJs2