Editable vuetify stepper with validation

Question

Is there any way to make an editable Vuetify stepper where I can make a validation that prevents the event of clicking on another step if the validation is incorrect?

I tried to modify the default event of the editable stepper-step with some event modifiers, like making an event I made before the Vuetify event and saying inside if I want to continue with the default event.

Answer 1

As far as I can understand you do not refer to prev/next actions being becoming enabled once some condition is satisfied. It would be trivial to control v-btn with disabled attribute or just give it a custom handler if the validation needs to be server-side. You probably refer to the stepper header.

There is only one solution I can think of - split header into separate items and control editable attribute individually.

<v-stepper v-model="currentStep" hide-actions>
  <v-stepper-header>
    <template v-for="(step, i) in steps">
      <v-divider v-if="i > 0" :key="i"></v-divider>
      <v-stepper-step
        :complete="currentStep > (i + 1)"
        :step="i + 1"
        :editable="i === 0 || steps[i - 1].completed"
        >{{ step.title }}</v-stepper-step>
    </template>
  </v-stepper-header>
</v-stepper>

export default {
  data () {
    return {
      currentStep: 1,
      selection: [],
      shipping: null,
      returnPolicyApproved: false,
    };
  },
  computed: {
    steps() {
      return [
        { title: 'Order', completed: this.selection.length > 0 },
        { title: 'Shipping', completed: this.selection.length > 0 && !!this.shipping },
        { title: 'Review', completed: this.returnPolicyApproved },
      ];
    },
  },
}

One thing to note here is that condition for step 2 repeats condition for step 1. This means that we support scenario in which after reaching last step, user can go back to the first one and make some changes. These changes might result in blocking step 2, but without repeating the condition, step 3 would still be clickable.

[
  { title: 'Step 1', completed: this.step1Valid },
  { title: 'Step 2', completed: this.step1Valid && this.step2Valid },
  { title: 'Step 3', completed:  this.step1Valid && this.step2Valid && this.step3Valid },
  // etc.
]

Full example with Vuetify 3, but mostly compatible with Vuetify 2.