TypeError：無法使用 VueJS 讀取未定義的屬性（讀取 '$refs'）

Question

父組件：

...
<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 - 但驗證總是錯誤的。

我希望你們中的某個人可以提供幫助。

Answer 1

問題是在 Vue.js 中，一個組件是通過一組特定的階段呈現的——例如，一個組件在它被掛載之前首先被創建——並且你試圖檢索一個對呈現的 DOM object 的引用，它沒有尚未由框架呈現。 換句話說，您正在嘗試檢索尚不存在的東西（正如您所懷疑的那樣）。

為了解決這個問題，你必須考慮到子組件還沒有被渲染，而是選擇推遲驗證直到組件被掛載。 一種這樣的選擇是讓子組件在成功安裝后向父組件發出信號，並在此之前返回默認驗證值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');
  }
}

當然，還有其他方法可以解決這個問題，我認為有多個比我上面說明的解決方案更好的解決方案。 也就是說，我想讓這個答案保持簡單； 希望以上內容足以幫助您掌握根本問題，並為您提供更好地設計代碼中所需解決方案的起點。