Let us say that we have following steps in the stepper:
Home > Purchase > Comments > Settings
Template:
<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:
<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>
This is just a mwe. I just don't know how I trigger this method "onLeave()" as soon as I switch to another step (like clicking on Settings or something).
In my case I have a method for each of the steps which has to be triggered as soon as I leave the step for another step. I hope that makes sense.
Use the change event to trigger the function:
<v-stepper @change="onLeave($event)" v-model="e1">
...
</v-stepper>
onLeave(step) {
switch (step) {
...
}
}
See here (Vuetify docs).