Vuetify垂直步进器需求：非线性切换与必填字段校验问题

我来帮你搞定这几个Vuetify步进器的需求！咱们一步步拆解解决：

要同时保留垂直布局、按钮导航功能、步骤完成状态，还能点击步骤标题快速切换，其实很简单——给你的<v-stepper>组件加上non-linear属性就可以了。这个属性允许用户自由跳转到任意已访问过的步骤，而你原本设置的:complete="step > n"绑定会继续生效，正确显示步骤完成后的勾选状态。

Vuetify的表单组件不依赖原生required属性直接生效，而是推荐用v-form结合**自定义校验规则（rules）**来实现字段校验。具体要做这几步：

• 给每个步骤里的输入控件包裹<v-form>，并给表单绑定一个ref，方便后续触发校验
• 给每个需要校验的字段添加:rules属性，定义必填（甚至格式校验，比如邮箱）的规则
• 修改“Continue”按钮的点击逻辑，先校验当前步骤的表单，通过后再切换到下一个步骤

<!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>
<!-- 添加non-linear属性开启非线性切换 -->
<v-stepper v-model='step' vertical non-linear>
<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-form包裹当前步骤的表单元素，绑定ref用于校验 -->
<v-form ref="form1">
<v-text-field 
  label='Name' 
  v-model='registration.name' 
  :rules="[v => !!v || 'Name is required']"
  required
></v-text-field>
<v-text-field 
  label='Email' 
  v-model='registration.email' 
  :rules="[v => !!v || 'Email is required', v => /.+@.+\..+/.test(v) || 'Email must be valid']"
  required
></v-text-field>
<v-btn color='primary' @click='validateAndGo(2, "form1")'>Continue</v-btn>
</v-form>
</v-stepper-content>
<v-stepper-content step='2'>
<v-form ref="form2">
<v-text-field 
  label='Street' 
  v-model='registration.street' 
  :rules="[v => !!v || 'Street is required']"
  required
></v-text-field>
<v-text-field 
  label='City' 
  v-model='registration.city' 
  :rules="[v => !!v || 'City is required']"
  required
></v-text-field>
<v-text-field 
  label='State' 
  v-model='registration.state' 
  :rules="[v => !!v || 'State is required']"
  required
></v-text-field>
<v-btn flat @click='step = 1'>Previous</v-btn>
<v-btn color='primary' @click='validateAndGo(3, "form2")'>Continue</v-btn>
</v-form>
</v-stepper-content>
<v-stepper-content step='3'>
<v-form ref="form3">
<v-text-field 
  label='Number of Tickets' 
  type='number' 
  v-model='registration.numtickets' 
  :rules="[v => v > 0 || 'Number of Tickets must be at least 1']"
  required
></v-text-field>
<v-select 
  label='Shirt Size' 
  v-model='registration.shirtsize' 
  :items='sizes' 
  :rules="[v => !!v || 'Shirt Size is required']"
  required
></v-select>
<v-btn flat @click='step = 2'>Previous</v-btn>
<v-btn color='primary' @click='submit'>Save</v-btn>
</v-form>
</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:{
// 封装通用的校验跳转方法，避免重复代码
validateAndGo(nextStep, formRef) {
  if (this.$refs[formRef].validate()) {
    this.step = nextStep;
  }
},
submit() {
  // 提交前记得校验最后一个步骤的表单
  if (this.$refs.form3.validate()) {
    alert('This is the post. Blah');
  }
}
}
})
</script>
</body>
</html>

• 非线性切换细节：加了non-linear后，用户点击步骤标题就能直接切换，而且步骤的完成状态（勾选标记）会根据step的值自动更新，完全符合你的需求
• 校验逻辑：每个字段的rules数组里定义了校验规则，当用户点击Continue时，会先调用对应表单的validate()方法，只有所有字段校验通过才会跳转到下一个步骤，错误信息会自动显示在输入框下方
• 代码复用：封装了validateAndGo方法，把校验和跳转的逻辑统一起来，避免每个按钮写重复代码

内容的提问来源于stack exchange，提问作者user9441470