How to disable Vuetify v-stepper action button

Question

I'm trying to disable Vuetify V-Stepper Actions like if it is on the 1st step the previous button will be disabled and the next button will be disabled when it reaches last step. Btw, I'm using Vuetify 3 and Nuxt 3 and here is my code

<template>
  <section class="p-10">
    <v-stepper
      :items="headerItems"
      rounded="0"
      theme="light"
      ref="stepper"
      elevation="0"
      selected-class="selected-item"
    >
      <template v-slot:item.1>
        <p>Page 1</p>
      </template>

      <template v-slot:item.2>
        <p>Page 2</p>
      </template>

      <template v-slot:item.3>
        <p>Page 3</p>
      </template>

      <template v-slot:item.4>
        <p>Page 4</p>
      </template>

      <template v-slot:actions>
        <section class="flex justify-end items-center space-x-4 pt-10">
          <v-btn @click="stepper.prev()" size="large" variant="outlined">
            <p class="text-[18px] font-medium capitalize tracking-wide">Previous</p>
          </v-btn>
          <v-btn @click="stepper.next()" size="large" variant="flat" color="primary" theme="dark">
            <p class="text-[18px] font-medium capitalize tracking-wide">Next</p>
          </v-btn>
        </section>
      </template>
    </v-stepper>
  </section>
</template>

<script setup>
const stepper = ref(null);
const headerItems = ref(["Step 1", "Step 2", "Step 3", "Step 4"]);
</script>

<style scoped>
/* Custom styles here */
</style>

I tried doing :disabled="stepper.activeStep === 0" in the v-btn but it's not working for both previous and next button.

Answer 1

As another comment suggested, adding a v-model and then disabling on that would be the easiest approach:

v-model="page"

For the Previous button use this: :disabled="page === 1"

For the Next button use this: :disabled="page === headerItems.length"