主页 / coding / 问题 / 78580355
Accepted
AbreQueVoy
Asked: 2024-06-05 18:32:56 +0800 CST

以编程方式转到上一步/下一步

  • 772

想法如下：有一个V-Stepper组件，它包含几个步骤。我想在validateDirectory方法成功完成时触发滑动到下一步的操作（即，未物理单击下一步按钮，但以编程方式调用该步骤）。

方法的定义或多或少类似于：

methods: {
    stepperPrev() {
      this.$refs.stepperActions.prev()
    },
    stepperNext() {
      this.$refs.stepperActions.next()
    },
    async validateDirectory() {
      const response = await fetch(...)
      this.stepperNext()
    }

其中v-stepper-actions包含：<v-stepper-actions ref="stepperActions" @click:next="next" @click:prev="prev"></v-stepper-actions>

但是，当尝试实现到下一个步进器窗口的过渡时，我收到错误： this.$refs.stepperActions.next is not a function。

还尝试将方法定义为：

stepperPrev(prev) {
  prev()
},
stepperNext(next) {
  next()
}

它也不起作用。

有什么办法可以触发过渡到下一步吗？另外，是否可以隐藏v-stepper-actions并仍然能够以编程方式触发操作？

vue.js

1 个回答

  1. Best Answer

    看起来这效果很好。

    <template>
  <v-app>
    <v-container>
      <button @click="stepperPrev">previous</button>
      <button @click="stepperNext">next</button>

      <v-stepper
         ref="stepperActions" <--- ⚠️ important
         :items="['Step 1', 'Step 2', 'Step 3']"
      >
        <template v-slot:item.1>
          <v-card title="Step One" flat>...</v-card>
        </template>

        <template v-slot:item.2>
          <v-card title="Step Two" flat>...</v-card>
        </template>

        <template v-slot:item.3>
          <v-card title="Step Three" flat>...</v-card>
        </template>
      </v-stepper>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    methods: {
      stepperPrev() {
        this.$refs.stepperActions.prev()
      },
      stepperNext() {
        this.$refs.stepperActions.next()
      },
    },
  }
</script>

    这里是一个游乐场。

    您需要的主要内容是ref="stepperActions"其v-stepper本身。

    • 2

相关问题