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');
  }
}

当然，还有其他方法可以解决这个问题，我认为有多个比我上面说明的解决方案更好的解决方案。 也就是说，我想让这个答案保持简单； 希望以上内容足以帮助您掌握根本问题，并为您提供更好地设计代码中所需解决方案的起点。