Vue3如何为循环面板的每个步骤分别存储用户选择值？

一、父组件改造 #

1. 定义存储变量 #

推荐用统一对象管理所有选择值（扩展性更强），也可以用单独变量：

import { ref } from 'vue';

const activeLevel = ref(0);
// 统一对象存储（推荐）
const userSelections = ref({
  gender: '',
  activityLevel: ''
});

// 或者单独变量（适合步骤少的场景）
// const userGender = ref('');
// const userActivityLevel = ref('');

2. 实现选择值存储方法 #

根据当前激活的面板索引，将选中值存入对应字段：

方式一：基于统一对象+字段映射

先给levels数组的每一项添加对应存储字段：

const levels = [
  {
    heading: 'Choose a gender',
    text: ['Male', 'Female', 'Other'],
    field: 'gender' // 对应userSelections中的字段
  },
  {
    heading: 'What is your activity level?',
    text: ['Sedentary', 'Low to Moderate Activity', 'Active Lifestyle', 'Extreme Active'],
    field: 'activityLevel'
  }
];

然后实现configData方法：

const configData = ({ field, value }) => {
  userSelections.value[field] = value;
};

方式二：基于单独变量+面板索引判断

如果用单独变量，直接通过activeLevel判断存储目标：

const configData = (selectedItem) => {
  switch(activeLevel.value) {
    case 0:
      userGender.value = selectedItem;
      break;
    case 1:
      userActivityLevel.value = selectedItem;
      break;
    // 新增步骤时添加对应case即可
  }
};

3. 父组件模板保持原监听逻辑 #

<component
  :list="levels"
  @chosen="activeLevel++"
  @configData="configData"
  :active-level="activeLevel"
  :is="BaseLevel"
></component>

二、子组件调整 #

确保点击选项时同时传递选中值并切换面板：

1. 子组件模板 #

<div 
  v-for="item in list[activeLevel].text" 
  :key="item"
  @click="handleSelect(item)"
>
  {{ item }}
</div>

2. 子组件逻辑 #

import { defineProps, defineEmits } from 'vue';

const props = defineProps(['list', 'activeLevel']);
const emit = defineEmits(['chosen', 'configData']);

const handleSelect = (item) => {
  // 如果用方式一（统一对象+字段映射），需要传递字段和值
  const currentLevel = props.list[props.activeLevel];
  emit('configData', { field: currentLevel.field, value: item });
  
  // 如果用方式二（单独变量），直接传选中值即可
  // emit('configData', item);
  
  emit('chosen'); // 切换到下一步面板
};

补充说明 #

• 用统一对象+字段映射的方式更健壮，后续新增步骤时，只需要在levels数组中添加新的配置项（包含field字段）即可，无需修改存储逻辑。
• 如果需要回退上一步，只需要修改activeLevel的值，已存储的选择值会保留，无需额外处理。

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