Vue：在步进器中选择另一个步骤时触发方法

Question

假设我们在步进器中有以下步骤：

首页 > 购买 > 评论 > 设置

模板：

<template>
  <div>
    <v-card class="mb-4">
      <v-card-text>
        <v-select
          v-model="steps"
          :items="[2, 3, 4, 5, 6]"
          label="# of steps"
        ></v-select>
      </v-card-text>
    </v-card>
    <v-stepper v-model="e1">
      <v-stepper-header>
        <template v-for="n in steps">
          <v-stepper-step
            :key="`${n}-step`"
            :complete="e1 > n"
            :step="n"
            editable
          >
            Step {{ n }}
          </v-stepper-step>

          <v-divider
            v-if="n !== steps"
            :key="n"
          ></v-divider>
        </template>
      </v-stepper-header>

      <v-stepper-items>
        <v-stepper-content
          v-for="n in steps"
          :key="`${n}-content`"
          :step="n"
        >
          <v-card
            class="mb-12"
            color="grey lighten-1"
            height="200px"
          ></v-card>

          <v-btn
            color="primary"
            @click="nextStep(n)"
          >
            Continue
          </v-btn>

          <v-btn text>
            Cancel
          </v-btn>
        </v-stepper-content>
      </v-stepper-items>
    </v-stepper>
  </div>
</template>

脚本：

<script>
    export default {
        data() {
            return {
                e1: 1,
                steps: 2,
            }
        },

        watch: {
            steps(val) {
                if (this.e1 > val) {
                    this.e1 = val
                }
            },
        },

        methods: {
            nextStep(n) {
                if (n === this.steps) {
                    this.e1 = 1
                } else {
                    this.e1 = n + 1
                }
            },
            onLeave() {
                switch (e1) {
                    case 1:
                        console.log("A")
                        break;
                    case 2:
                        console.log("B")
                        break;
                    case 3:
                        console.log("C")
                        break;
                    case 4:
                        console.log("D")
                        break;
                }
            },

        },
    } </script>

这只是一个mwe。我只是不知道如何在切换到另一个步骤（例如单击“设置”或其他）时立即触发此方法“onLeave()”。

在我的例子中，我有一个方法用于每个步骤，一旦我离开该步骤进行另一个步骤就必须触发该方法。我希望这是有道理的。

Answer 1

使用change事件触发函数：

<v-stepper @change="onLeave($event)" v-model="e1">
...
</v-stepper>

onLeave(step) {
  switch (step) {
    ...         
  }
}

参见 here（Vuetify 文档）。

Vue：在步进器中选择另一个步骤时触发方法

Vue: triggering a method when choosing another step in the stepper

vue.js

v-stepper