使用 v-for 的顺序列表

Question

我有一个对象，其中包含我想根据类别显示的成对数据。我相信这与嵌套的 v-for 循环有关，但我无法找出正确的方法来解决这个问题。

 categoryArray = {stage 1, red}, {stage 1, blue}, {stage 2, orange}, {stage 3, brown}, {stage 2, green}

所需的显示：第一阶段：红色、蓝色第 2 阶段：橙色第 3 阶段：棕色

我还没有可行的代码。我的策略是创建一组独特的舞台，用它来显示舞台，但我不知道如何迭代舞台内的项目。

进入阶段：

let stagesArray = [];
      categoryArray.value.forEach((entry, index) => {
        stagesArray.push(entry.stageNumber);
      });
      //creating array of unique stages

      uniqueRooms.value = [...new Set(stagesArray)];
    })

上面的工作得到了房间的唯一数组。

<template>
   <div v-for="(stage, index) in uniqueRooms" :key="index">
       {{ room }}
      <div v-for="(color, index) in filterStages" :key="index">
         {{ color }} 
      </div>
   </div>
</template>
<script>

//this is a mess and I don't know where to go.
const filterStages = computed(function (stage) {
  return stagesUnique.value.forEach((stageNumber) => {
    return categoriesArray.value.filter((color) => color.stage     
    === stageNumber);
    
  });
 </script>

我滑雪了。我只需要一些关于如何使用唯一值循环遍历主类别（阶段），然后显示该类别中所有匹配颜色的线索。

这看起来非常接近，但我想不出从中获得独特阶段的方法。

Answer 1

两个循环的索引相同，所以这是错误的

   <div v-for="(stage, index) in uniqueRooms" :key="index">
                                                     ----
       {{ room }}
      <div v-for="(color, index) in filterStages" :key="index">
                                                        -----

Answer 2

这是您要找的吗？

const { createApp, computed } = Vue;

createApp({
  setup() {
    const data = [
      { stage: 1, color: 'red' },
      { stage: 1, color: 'blue' },
      { stage: 2, color: 'orange' },
      { stage: 3, color: 'brown' },
      { stage: 2, color: 'green' }
    ];
    const stages = computed(
      () => [...new Set(data.map(({ stage }) => stage))]
    );
    const stageColors = computed(
      () => s => data.filter(({ stage }) => stage === s)
                     .map(({ color }) => color)
    );
    return {
      stages,
      stageColors
    }
  }
}).mount('#app');

h4 { margin-bottom: 0;}

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <div v-for="stage in stages" :key="stage">
    <h4>Stage #{{ stage }}</h4>
    <ul>
      <li v-for="color in stageColors(stage)" :key="color" v-text="color" />
    </ul>
    <hr>
  </div>
</div>

使用 v-for 的顺序列表

Sequential lists using v-for

javascript

vue.js

quasar