Início / coding / Perguntas / 78580355
Accepted
AbreQueVoy
Asked: 2024-06-05 18:32:56 +0800 CST

Ir para a etapa anterior/próxima programaticamente

  • 772

A ideia é a seguinte: existe um V-Steppercomponente, ele contém poucos passos. Gostaria de acionar a ação de deslizar para a próxima etapa quando um validateDirectorymétodo for concluído com êxito (ou seja, o botão da próxima etapa não for clicado fisicamente, mas a etapa for invocada programaticamente).

Os métodos são definidos mais ou menos como:

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

O v-stepper-actionscontém:<v-stepper-actions ref="stepperActions" @click:next="next" @click:prev="prev"></v-stepper-actions>

No entanto, ao tentar fazer a transição para a próxima janela de passo, recebo o erro: this.$refs.stepperActions.next is not a function.

Também tentei definir os métodos como:

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

Também não funcionou.

Existe alguma maneira de acionar a transição para a próxima etapa? Além disso, é possível ocultar v-stepper-actionse ainda poder acionar a ação programaticamente?

vue.js

1 respostas

  1. Best Answer

    Parece que isso está funcionando muito bem.

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

    Aqui está um playground .

    A principal coisa que você precisa está ref="stepperActions"por v-steppersi só.

    • 2

relate perguntas