Vuetify 2垂直非线性v-stepper第二步内容不显示求助

问题原因 #

你的代码缺少对步进器激活状态的绑定控制，在Vuetify 2的non-linear（非线性）模式下，v-stepper-content的显示依赖于当前激活的步骤值，仅靠complete属性无法自动触发内容显示。

修正后的代码 #

<template>
  <v-stepper vertical non-linear v-model="activeSteps">
    <v-stepper-items>
      <v-stepper-step step="1" :complete="activeSteps.includes(1)">
        1 Step
      </v-stepper-step>

      <v-stepper-content step="1">
        This is the Step 1
      </v-stepper-content>

      <v-stepper-step step="2" :complete="activeSteps.includes(2)">
        2 Step?
      </v-stepper-step>

      <v-stepper-content step="2">
        This is the Step 2
      </v-stepper-content>
    </v-stepper-items>
  </v-stepper>
</template>

<script>
export default {
  data() {
    return {
      activeSteps: [1, 2] // 默认激活步骤1和2，同时显示对应内容
    }
  }
}
</script>

关键修改点 #

• 给v-stepper添加v-model="activeSteps"，通过数组变量控制多个激活的步骤（非线性模式支持数组类型的v-model）
• 将complete属性改为动态绑定:complete="activeSteps.includes(stepNumber)"，根据激活状态标记步骤完成
• 移除v-stepper-content上无效的complete属性，该属性仅适用于v-stepper-step组件

如果需要点击步骤切换显示内容，可给v-stepper-step添加点击事件并修改activeSteps数组：

<v-stepper-step step="2" :complete="activeSteps.includes(2)" @click="toggleStep(2)">
  2 Step?
</v-stepper-step>

对应添加方法：

toggleStep(step) {
  const index = this.activeSteps.indexOf(step)
  if (index > -1) {
    this.activeSteps.splice(index, 1)
  } else {
    this.activeSteps.push(step)
  }
}

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