Vuetify stepper vertical and non-linear issues
Question
I'm trying to understand Vuetify's stepper but so far my efforts have failed. I have been through their page and trying different steppers , almost each one of them has something I would need, but I have no idea how to combine them.
So here is one example that has something I need but it is also missing many of the things I would like it to include.
<!DOCTYPE html> <html> <head> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <body> <div id="app"> <v-app> <v-content> <v-container> <v-stepper v-model="step" vertical> <v-stepper-header> <v-stepper-step step="1" :complete="step > 1">Person</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-container> </v-content> </v-app> <br/><br/>Debug: {{registration}} </div> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script> <script> new Vue({ el: '#app', data: () => ({ step:1, registration:{ name:null, email:null, street:null, city:null, state:null, numtickets:0, shirtsize:'XL' }, sizes:['S','M','L','XL'] }), methods:{ submit() { alert('This is the post. Blah'); } } }) </script> </body> </html> The official Vuetify stepper tutorial page Vuetify stepper
Firstly I would like it to be vertical .
Secondly, if possible I would like the continue and previous to continue working, aswell as the box checking when finishing a page, but for it to also include an option to quickly change between steps by clicking on them like there was an example called non-linear stepper .
And finally is there a built in method to check for required fields? At the moment there is a required tag in the end, but it does nothing.
Any help/information will be useful.
1 answers
solution1
3 ACCPTED 2018-05-13 01:05:07
For validation, there are many ways to do. One way is wrap each step in a form and use form validation https://next.vuetifyjs.com/en/components/forms#example-validation-with-submit-and-clear
<v-form ref="form" v-model="valid" lazy-validation>
<v-text-field label="Number of Tickets" type="number"
v-model="registration.numtickets"
:rules="[v => !!v || 'Item is required']"></v-text-field>
<v-select label="Shirt Size"
v-model="registration.shirtsize"
:items="sizes"
:rules="[v => !!v || 'Item is required']"></v-select>
<v-btn flat @click.native="step = 2" >Previous</v-btn>
<v-btn color="primary" @click="submit">Save</v-btn>
</v-form>
and in submit method
methods:{
submit() {
if (this.$refs.form.validate()) {
alert('Data is valid');
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.