从v-stepper中引用组件

Question

我正在使用v-stepper，并希望在进行过程中收集结果。在最后一步，我想使用所有这些结果来做一些事情。伪代码如下所示：

// MyStepper.vue
<v-stepper-content step="1">
  <SomeComponent ref="one"/>
  // This works so the ref is valid
  <v-btn text @click="this.$refs.one.runMethod()">Test</v-btn>
  <v-btn text @click="stepperNum++">Next</v-btn>
</v-stepper>
<v-stepper-content step="2">
  <SomeOtherComponent ref="two"/>
  // This works so the ref is valid
  <v-btn text @click="this.$refs.two.runMethod()">Test</v-btn>
  <v-btn text @click="stepperNum++">Next</v-btn>
</v-stepper>
<v-stepper-content step="3">
  <AnotherComponent v-if="canLoad"
   :one="$refs.one.results" 
   :two="$refs.two.results"/>
</v-stepper>

// SomeComponent.vue/SomeOtherComponent.vue
data: function() {
  return {
    results: [],
    stepperNum: 0
  }
}
methods: {
  runMethod() {
    console.log("Clicked");
  }
}
computed: {
  canLoad() {
    return this.stepperNum > 2;
  }
}

// AnotherComponent.vue
props: {
  one: {
    type: Array,
    required: true
  },
  two: {
    type: Array,
    required: true
  }
}

当我运行这段代码时，我得到一条't.$refs.one is undefined‘的消息。我假设这是因为在加载MyStepper.vue页面的同时加载了所有内容。

有没有办法防止v-stepper在前一个V-stepper完成之前加载他们的身体(也就是AnotherComponent.vue)？是否有不同的策略可以用来实现所需的功能？

更新:我决定观察子组件内部的结果，并发出一个事件。父组件使用emitted事件来控制数据和启用/禁用next按钮，将结果传递给第三个组件，等等。

Answer 1

编辑： OP确认使用计算属性的refs内容时没有反应性。认为第一个代码块是一种错误的方法。使用常规变量而不是ref。

我想当两个引用都加载时，我会选择一个返回true的计算属性：

computed: {
  canLoadThirdStep() {
    return (this.$refs.one && this.$refs.two)
  }
}

然后在v-if中使用返回值来显示AnotherComponent

<AnotherComponent 
  v-if="canLoadThirdStep" 
  :one="$refs.one.results" 
  :two="$refs.two.results" 
/>

我希望这是你想要的。让我知道这是否有效！