Go to previous/next step programmatically

Question

The idea is as follows: there is a V-Stepper component, it contains few steps. I'd like to trigger the action of sliding to the next step when a validateDirectory method completes successfully (i.e. the next step button isn't clicked physically, but the step gets invoked programmatically).

Methods are defined more or less like:

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

The v-stepper-actions contain: <v-stepper-actions ref="stepperActions" @click:next="next" @click:prev="prev"></v-stepper-actions>

However, when trying to achieve the transition to the next stepper window, I get the error: this.$refs.stepperActions.next is not a function.

Also tried defining the methods as:

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

It also didn't work.

Is there any way to trigger the transition to the next step? Also, is it possible to hide the v-stepper-actions and still be able to trigger the action programmatically?

Answer 1

Looks like this is working great.

<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>

Here is a playground.

Main thing you need is ref="stepperActions" on the v-stepper itself.