带验证的可编辑Vuetify步进器：阻止未验证通过时的步骤跳转

完全可以实现这个需求，核心思路是利用Vuetify步进器提供的@click:step事件拦截默认切换行为，先执行当前步骤的验证逻辑，验证不通过则阻止跳转，通过后再手动切换步骤。以下是具体实现方案：

完整代码示例 #

模板部分 #

<template>
  <v-stepper
    v-model="currentStep"
    editable
    vertical
  >
    <!-- 步骤1：基本信息 -->
    <v-stepper-step
      :complete="currentStep > 1"
      step="1"
      @click:step="handleStepClick(1, $event)"
    >
      基本信息
    </v-stepper-step>
    <v-stepper-content step="1">
      <v-text-field
        v-model="form.name"
        label="姓名"
        required
        ref="nameInput"
      ></v-text-field>
      <v-btn @click="nextStep">下一步</v-btn>
    </v-stepper-content>

    <!-- 步骤2：联系方式 -->
    <v-stepper-step
      :complete="currentStep > 2"
      step="2"
      @click:step="handleStepClick(2, $event)"
    >
      联系方式
    </v-stepper-step>
    <v-stepper-content step="2">
      <v-text-field
        v-model="form.phone"
        label="手机号"
        required
        ref="phoneInput"
        :rules="[v => /^1[3-9]\d{9}$/.test(v) || '请输入有效的手机号']"
      ></v-text-field>
      <v-btn @click="prevStep">上一步</v-btn>
      <v-btn @click="nextStep">下一步</v-btn>
    </v-stepper-content>

    <!-- 步骤3：确认提交 -->
    <v-stepper-step
      step="3"
      @click:step="handleStepClick(3, $event)"
    >
      确认信息
    </v-stepper-step>
    <v-stepper-content step="3">
      <p>姓名：{{ form.name }}</p>
      <p>手机号：{{ form.phone }}</p>
      <v-btn @click="prevStep">上一步</v-btn>
      <v-btn @click="submitForm">提交</v-btn>
    </v-stepper-content>
  </v-stepper>
</template>

脚本部分 #

<script>
export default {
  data() {
    return {
      currentStep: 1,
      form: {
        name: '',
        phone: ''
      }
    }
  },
  methods: {
    handleStepClick(targetStep, event) {
      // 点击当前步骤无需处理
      if (targetStep === this.currentStep) return

      // 验证当前步骤表单
      const isValid = this.validateCurrentStep()
      if (!isValid) {
        // 验证不通过，阻止默认跳转行为
        event.preventDefault()
        return
      }

      // 验证通过，手动切换步骤
      this.currentStep = targetStep
    },
    validateCurrentStep() {
      switch (this.currentStep) {
        case 1:
          return this.$refs.nameInput.validate()
        case 2:
          return this.$refs.phoneInput.validate()
        case 3:
          // 确认步骤无需验证，直接放行
          return true
        default:
          return false
      }
    },
    nextStep() {
      const isValid = this.validateCurrentStep()
      if (isValid && this.currentStep < 3) {
        this.currentStep++
      }
    },
    prevStep() {
      if (this.currentStep > 1) {
        this.currentStep--
      }
    },
    submitForm() {
      alert('表单提交成功！')
    }
  }
}
</script>

关键逻辑说明 #

1. 事件拦截：通过@click:step监听步骤点击事件，传入$event对象后调用event.preventDefault()阻止Vuetify默认的步骤切换行为。
2. 表单验证：利用Vuetify表单组件的validate()方法（通过ref获取组件实例），对当前步骤的表单字段进行验证。
3. 手动切换：只有当当前步骤验证通过时，才手动更新currentStep的值完成步骤切换。
4. 兼容按钮切换：对“下一步”“上一步”按钮也添加验证逻辑，确保所有切换路径都经过验证。

扩展提示 #

• 如果是异步验证（比如请求后端校验），可以将validateCurrentStep改为异步函数，用async/await处理验证结果后再决定是否切换步骤。
• 水平步进器只需去掉vertical属性，逻辑完全通用。

内容的提问来源于stack exchange，提问作者Carlos Rolando Morell