如何禁用Vuetify V-Stepper操作按钮？（Vuetify3+Nuxt3）

通过绑定selected属性到自定义响应式变量来跟踪当前步骤，能可靠控制按钮的禁用状态：

1. 添加响应式变量currentStep并绑定到v-stepper的selected属性，同步步骤更新
2. 根据currentStep值判断按钮禁用状态：
   • Previous按钮：当currentStep === 0（第一步）时禁用
   • Next按钮：当currentStep === headerItems.length - 1（最后一步）时禁用

修改后的完整代码：

<template>
  <section class="p-10">
    <v-stepper
      :items="headerItems"
      rounded="0"
      theme="light"
      ref="stepper"
      elevation="0"
      selected-class="selected-item"
      :selected="currentStep"
      @update:selected="currentStep = $event"
    >
      <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"
            :disabled="currentStep === 0"
          >
            <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"
            :disabled="currentStep === headerItems.length - 1"
          >
            <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"]);
const currentStep = ref(0);
</script>

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

原方法无效的原因 #

你之前使用stepper.activeStep === 0失效，是因为：

• Vuetify 3的v-stepper对外暴露的步骤控制属性是selected而非内部属性activeStep，直接访问activeStep无法获取正确的响应式状态
• 组件未完全挂载时，ref实例的内部属性可能未初始化，导致判断逻辑失效

通过绑定自定义响应式变量，能确保步骤状态同步更新，准确控制按钮禁用状态。

内容的提问来源于stack exchange，提问作者Yondaime