Перейти к предыдущему/следующему шагу программно

Идея такая: есть компонент 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 vuetify.js

05.06.2024 12:32

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, это работает отлично.

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

05.06.2024 12:56