Vue3中form-wizard-vue3组件v-select仅首标签页显示问题求助

问题根源 #

form-wizard-vue3 默认会卸载未激活步骤的 DOM 结构（类似 v-if 的行为），而非仅隐藏（v-show）。这导致后续标签页里的 v-select 组件没有被初始化，自然无法正常渲染。

快速修复方案 #

给 <form-wizard> 组件添加 keep-alive 属性，让所有步骤的 DOM 保持挂载状态，避免组件被卸载：

修改后的代码示例 #

<template>
  <!-- 添加 keep-alive 属性 -->
  <form-wizard keep-alive>
    <wizard-step title="第一步">
      <v-select v-model="form.value1" :items="optionList" />
    </wizard-step>
    <wizard-step title="第二步">
      <v-select v-model="form.value2" :items="optionList" />
    </wizard-step>
    <wizard-step title="第三步">
      <v-select v-model="form.value3" :items="optionList" />
    </wizard-step>
  </form-wizard>
</template>

<script setup>
import { ref } from 'vue'
const form = ref({
  value1: '',
  value2: '',
  value3: ''
})
const optionList = ref(['选项1', '选项2', '选项3'])
</script>

精细化控制（可选） #

如果不需要缓存所有步骤，也可以单独给需要保留的 <wizard-step> 添加 keep-alive 属性：

<wizard-step title="第二步" keep-alive>
  <v-select v-model="form.value2" :items="optionList" />
</wizard-step>

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