如何禁用 Vuetify v-stepper 操作按钮

Question

我正在尝试禁用 Vuetify V-Stepper 操作，就像在第一步时，上一个按钮将被禁用，而下一个按钮将在到达最后一步时被禁用。顺便说一句，我正在使用 Vuetify 3 和 Nuxt 3，这是我的代码

<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>

我尝试在

:disabled="stepper.activeStep === 0"

中执行

v-btn

，但它不适用于上一个和下一个按钮。

Answer 1

正如另一条评论所建议的，添加 v-model 然后禁用它是最简单的方法：

v-model="page"

对于“上一个”按钮，请使用：

:disabled="page === 1"

对于“下一步”按钮，请使用：

:disabled="page === headerItems.length"