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步进器在完成之前的v步进器之前加载其主体（又称为AnotherComponent.vue）？应该使用其他策略来实现所需的功能吗？

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

Answer 1

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

我想当两个引用都加载时，我将返回一个返回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" 
/>

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

从v步进器中引用组件

1 个答案: