reset a vuetify stepper

Question

I'm looking for a function who can resetting my stepper made with vuetify.

the e1 is set as 0 but if I make a function who reset this value to 0, it doesn't work and the stepper set as the same screen.

score 2 · Accepted Answer · answered Oct 17 '19 at 18:28

It is possible to reset a stepper to default state

Find the working codepen here: https://codepen.io/chansv/pen/wvvzddP?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-stepper v-model="step" vertical>
            <v-stepper-header>
              <v-stepper-step step="1" :complete="step > 1">Your Information</v-stepper-step>
              <v-divider></v-divider>
              <v-stepper-step step="2" :complete="step > 2">Your Address</v-stepper-step>
              <v-divider></v-divider>
              <v-stepper-step step="3">Misc Info</v-stepper-step>
            </v-stepper-header>
            <v-stepper-items>
              <v-stepper-content step="1">

                 <v-text-field label="Name" v-model="registration.name" required></v-text-field>
                 <v-text-field label="Email" v-model="registration.email" required></v-text-field>

                <v-btn color="primary" @click.native="step = 2">Continue</v-btn>
              </v-stepper-content>
              <v-stepper-content step="2">

                  <v-text-field label="Street" v-model="registration.street" required></v-text-field>
                  <v-text-field label="City" v-model="registration.city" required></v-text-field>
                  <v-text-field label="State" v-model="registration.state" required></v-text-field>

                <v-btn flat @click.native="step = 1">Previous</v-btn>
                <v-btn color="primary" @click.native="step = 3">Continue</v-btn>

              </v-stepper-content>
              <v-stepper-content step="3">

                <v-text-field label="Number of Tickets" type="number"
                              v-model="registration.numtickets" required></v-text-field>
                <v-select label="Shirt Size" v-model="registration.shirtsize" 
                          :items="sizes" required></v-select>

                <v-btn flat @click.native="step = 2">Previous</v-btn>
                <v-btn color="primary" @click.prevent="submit">Save</v-btn>

              </v-stepper-content>
            </v-stepper-items>
          </v-stepper>
  </v-app>
</div>

const defaultReg = Object.freeze({
        name:null,
        email:null,
        street:null,
        city:null,
        state:null,
        numtickets:0,
        shirtsize:'XL'
      });
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {

    return {
      step:1,
      registration: Object.assign({}, defaultReg),
      sizes:['S','M','L','XL']
    }
  },
  methods:{
    submit() {
      this.registration = Object.assign({}, defaultReg);
      this.step = 1;
    }
  }
})

Thanks chans, I found the solution too – TheDevGuy Oct 17 '19 at 20:30 — TheDevGuy, Oct 17 '19 at 20:30

jogarcia · Answer 2 · 2022-02-07T21:43:14.490

A simpler approach at resetting your stepper is by using the key prop assigning to it a value and then in the function increasing this value. Something like this:

<template>
  <v-stepper
    :key="stepperKey"
    v-model="e1"
  >
    ...
  </v-stepper>
</template>
<script>
  export default {
    data () {
      return {
        e1: 1,
        stepperKey: 0
      }
    },
    methods: {
      increaseKey () { this.stepperKey++ }
    }
  }
</script>

The key prop or attribute is a build in Vue.js feature. Even if you don't see it it's been used on the back. Changing the key will trigger a re render.

If you have doubt about the key attribute/prop here is a nice article about it

reset a vuetify stepper

2 Answers2