Vue中使用嵌套v-for按阶段分类展示对应颜色数据的问题咨询

你可以通过以下两种方式实现需求，核心是要把当前遍历到的阶段传入过滤逻辑，拿到该阶段对应的所有颜色：

问题修正说明 #

你之前的写法存在几个问题：

• computed 默认不支持直接传入参数，你尝试给filterStages传stage的写法不生效
• 变量命名不统一（比如代码里同时出现uniqueRooms/stagesUnique、categoryArray/categoriesArray），导致逻辑混乱
• 嵌套循环没有关联外层的当前阶段，无法筛选对应颜色

方案1：直接在模板中调用过滤方法（适合小数据量场景） #

脚本部分代码 #

// 假设你已经正确定义了响应式变量 categoryArray 和 uniqueRooms
// 新增一个过滤方法，接收阶段参数返回对应颜色数组
const getColorsByStage = (stage) => {
  return categoryArray.value.filter(item => item.stageNumber === stage).map(item => item.color)
}

模板部分代码 #

<template>
  <div v-for="(stage, index) in uniqueRooms" :key="`stage-${index}`">
    <!-- 输出阶段名称 + 对应颜色用逗号拼接 -->
    {{ stage }}: {{ getColorsByStage(stage).join(', ') }}
  </div>
</template>

如果你需要单独渲染每个颜色，就用嵌套循环的写法：

<template>
  <div v-for="(stage, index) in uniqueRooms" :key="`stage-${index}`">
    {{ stage }}:
    <span v-for="(color, colorIndex) in getColorsByStage(stage)" :key="`color-${colorIndex}`">
      {{ colorIndex > 0 ? ', ' : '' }}{{ color }}
    </span>
  </div>
</template>

方案2：提前预处理数据为分组结构（推荐，性能更好） #

如果数据量较大，建议提前把原数组处理成分组结构，避免每次渲染都循环过滤：

脚本预处理代码 #

// 在拿到categoryArray后直接预处理成分组对象
const stageColorMap = computed(() => {
  const map = {}
  categoryArray.value.forEach(item => {
    if (!map[item.stageNumber]) {
      map[item.stageNumber] = []
    }
    map[item.stageNumber].push(item.color)
  })
  return map
})

模板部分代码 #

<template>
  <!-- 直接遍历分组对象的键值对 -->
  <div v-for="(colors, stage) in stageColorMap" :key="stage">
    {{ stage }}: {{ colors.join(', ') }}
  </div>
</template>

这种写法不需要单独维护去重的阶段数组，也不需要每次渲染都执行过滤逻辑，性能更优。

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