vue.js - 重置一个 Vuetify 步进器

Question

我正在寻找一个可以重置我用 vuetify 制作的步进器的功能。

e1 设置为 0 但如果我创建一个将此值重置为 0 的函数，它将不起作用并且步进器设置为同一屏幕。

标签： vue.jsvuetify.jsstepper

Answer 1

可以将步进器重置为默认状态

在这里找到工作的 codepen：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;
    }
  }
})