2

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

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

4

2 回答 2

3

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

在这里找到工作的 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;
    }
  }
})
于 2019-10-17T18:28:27.180 回答
1

重置步进器的一种更简单的方法是使用key prop为其分配一个值，然后在函数中增加该值。像这样的东西：

<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>

关键道具或属性是 Vue.js 功能的构建。即使你没有看到它，它也被用在了背面。更改密钥将触发重新渲染。

如果您对关键属性/道具有疑问，这里有一篇不错的文章

于 2022-02-07T21:37:28.903 回答