I make a vue app and I have there vuetify stepper. I want to change step to next by 1min. This is my code:
<template>
<v-stepper v-model="e1">
<v-stepper-header>
<v-stepper-step :complete="e1 > 1" step="1">Name of step 1</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step :complete="e1 > 2" step="2">Name of step 2</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3">Name of step 3</v-stepper-step>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content step="1">
<v-card class="mb-5" height="400px">
<span>{{ minutes }}</span>
<span>:</span>
<span>{{ seconds }}</span>
<v-btn class="info" @click="startTimer">start</v-btn>
</v-card>
<v-btn color="primary" @click="e1 = 2">Continue</v-btn>
<v-btn flat>Cancel</v-btn>
</v-stepper-content>
<v-stepper-content step="2">
<v-card class="mb-5" height="400px"></v-card>
<v-btn color="primary" @click="e1 = 3">Continue</v-btn>
<v-btn flat>Cancel</v-btn>
</v-stepper-content>
<v-stepper-content step="3">
<v-card class="mb-5" height="400px"></v-card>
<v-btn color="primary" @click="e1 = 1">Continue</v-btn>
<v-btn flat>Cancel</v-btn>
</v-stepper-content>
</v-stepper-items>
</v-stepper>
</template>
<script>
export default {
data() {
return {
e1: 0,
timer: null,
totalTime: 1 * 60,
resetButton: false
};
},
methods: {
startTimer: function() {
this.timer = setInterval(() => this.countdown(), 1000);
},
resetTimer: function() {
this.totalTime = 1 * 60;
clearInterval(this.timer);
this.timer = null;
},
padTime: function(time) {
return (time < 10 ? "0" : "") + time;
},
countdown: function() {
if (this.totalTime >= 1) {
this.totalTime--;
} else {
this.totalTime = 0;
this.resetTimer();
}
},
},
computed: {
minutes: function() {
const minutes = Math.floor(this.totalTime / 60);
return this.padTime(minutes);
},
seconds: function() {
const seconds = this.totalTime - this.minutes * 60;
return this.padTime(seconds);
}
}
};
</script>
I added here a timer, but it's start by clicking start button. What I want to achieve is: timer starts automatically and go to next step after 1 minute, then timer starts again and go next after 1min etc...
