Vuetify stepper 垂直和非线性问题答案

【问题标题】：Vuetify stepper vertical and non-linear issuesVuetify stepper 垂直和非线性问题
【发布时间】：2018-10-23 00:25:02
【问题描述】：

我正在尝试理解 Vuetify's stepper 但到目前为止我的努力都失败了。我浏览了他们的页面并尝试了不同的steppers，几乎每个人都有我需要的东西，但我不知道如何组合它们。

所以这里有一个例子，它有我需要的东西，但它也缺少许多我希望它包含的东西。

Codepen

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

官方Vuetifystepper tutorial pageVuetify stepper

首先我希望它是vertical。

其次，如果可能的话，我希望 continue 和 previous 在完成页面时继续工作，以及框 checking，但它还包括一个在 steps 之间快速切换的选项点击它们，就像有一个名为 non-linear stepper 的示例一样。

最后是否有内置方法来检查必填字段？目前最后有一个required 标签，但它什么也没做。

任何帮助/信息都会很有用。

【问题讨论】：

标签： javascript html vue.js vuetify.js

【解决方案1】：

对于验证，有很多方法可以做。一种方法是将每个步骤包装在一个表单中并使用表单验证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>

在提交方法中

    methods:{
        submit() {
          if (this.$refs.form.validate()) {
            alert('Data is valid');
          }
        }
    }

演示https://codepen.io/ittus/pen/JvZKYa

【讨论】：

非常感谢，这正是我想要的。
还有一个问题，是否可以将图标设置为checkmark 或将requirements 或fields 全部填满后完成
不知道有没有办法。如果步骤无效，另一个选项是显示错误状态vuetifyjs.com/en/components/steppers#example-vertical-error