Code

I have a Vue component using v-stepper that looks like this:

<template>
  <v-stepper
    v-model="step"
    :items="items"
  >
    <template v-slot:item.1>
      <v-form>
        //content of step 1
      </v-form>
    </template>

    <template v-slot:item.2>
      <v-form>
        //content of step 2
      </v-form>
    </template>

    <template v-slot:item.3>
      <v-form>
        //content of step 3
      </v-form>
    </template>

  </v-stepper>
</template>

It’s a v-stepper with a <template v-slot:item.n> with a <v-form> inside of it for each step, but i don’t mind changing this structure to solve the problem.

What i want

I simply want to be able to validate each step before going to the next one, i want the user to only be able to click “Next” once all the fields on each step have been filled.

I either want to know how to i trigger the “go to the next step” function, because if i knew that, i could create a custom button and a function that is triggered every time this button is pressed, but i don’t know what that function might be.

Or, i wanted to know if there’s a way to access the built-in v-stepper-actions (the ones that already work and already come pre-built in the v-slots) and change their behavior.

What i’ve tried

This seemingly simple problem has made me binge-read the docs, try multiple ChatGPT prompts, look for reddit posts, other SO questions and even GitHub discussions. I’m sure there must be someone who’s asked this before, but i couldn’t find any solutions that worked for me. Some of the things i’ve tried were:

Creating my own <v-btn> or <v-stepper-actions>. I tried this, which i found in another SO post:

<v-stepper-actions
  :disabled="disabled"
  @click:next="Validate(next)"
  @click:prev="prev"
></v-stepper-actions>

but the buttons simply don’t seem to work or even be clickable at all (they appear clickable, but do nothing)

I tried a possible built-in prop from a 2018’s piece of documentation, changing my v-stepper to this:

  <v-stepper
    v-model="step"
    :items="items"
    @before-next-step="Validate()"
  >

But this also seemingly does nothing.

I’ve tried a multitude of different v-stepper templates and methods, more than i could remember and list here, with no success.

Does anyone have any idea on how to do that? I’m sure there must be a very simple fix, but i simply can’t find it anywhere.