我在制作这个 Vuetify Stepper 代码时得到了一些帮助，但我还有最后一个问题。我知道您可以设置一些规则，因此必须填写这些空白。例如，在我的代码中，当您在第3步中没有填写空白并且想要继续时，它不会让您这样做。但是，当您没有在第 2 步中填写空白时，它只会让您完成。
有没有办法让用户知道在哪个步骤下未满足要求，例如显示应类似于以下内容的警报消息 :rules="[() => false]" 当用户填充空白时将图标切换回正常状态？
这是代码:
<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" non-linear vertical>
<v-stepper-step :complete="step > 1" step="1" editable>
Person
</v-stepper-step>
<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-step :complete="step > 2" step="2" editable>
Person
</v-stepper-step>
<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" :rules="
[v => !!v || 'Item is required']" 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-step step="3" editable>Misc Info</v-stepper-step>
<v-stepper-content step="3">
<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>
</v-stepper-content>
</v-stepper>
</v-container>
</v-content>
</v-app>
<br/>
<br/>Debug: {{registration}}
</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>官方Vuetify 步进器教程页面 Vuetify stepper
我似乎不明白 if 语句在 vuetify 中如何工作。以及如何更改图标等。
最佳答案
对于更复杂的验证，我更喜欢使用像Vee Validate这样的库
添加到您的脚本
Vue.use(VeeValidate);
基本上，每一步都会变成:
<v-stepper-step :complete="step > 1"
step="1" editable
:rules="[() => !errors.has('name') && !errors.has('email')]">
Person
</v-stepper-step>
<v-stepper-content step="1">
<v-text-field name="name"
label="Name"
v-model="registration.name"
v-validate="'required'"
:error-messages="errors.collect('name')">
</v-text-field>
<v-text-field name="email"
label="Email"
v-model="registration.email"
v-validate="'required|email'"
:error-messages="errors.collect('email')">
</v-text-field>
<v-btn color="primary" @click.native="step = 2">Continue</v-btn>
</v-stepper-content>
请注意如何使用 v-validate 和 errors.has。
您可以在https://codepen.io/ittus/pen/ZoRyKv查看演示
关于javascript - 未填充空白时 Vuetify 步进器警报消息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50315474/