Question

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

将e1设置为0，但是如果我创建了一个将此值重置为0的函数，它将无法正常工作，并且将步进器设置为同一屏幕。

Answer 1

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

在此处找到有效的代码笔：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;
    }
  }
})

重设vuetify步进器

1 个答案: