使用 v-for 的顺序列表

Posted 2023-05-06

【中文标题】使用 v-for 的顺序列表

【英文标题】：Sequential lists using v-for

【发布时间】：2021-12-31 17:04:10

【问题描述】：

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

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

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

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

获得阶段：

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>

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

这似乎非常接近，但我无法找出从中获得独特阶段的方法。 Nested loop in Vue

【参考方案1】：

这就是你要找的吗？

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>

【讨论】：

哇！有效。非常感谢。感到无助。为了叙述解决方案，计算函数阶段从变量阶段的唯一值创建一个新数组。然后计算函数 stageColors 为每个数组中的颜色创建新数组。然后这个信息显示在模板中调用 stageColors 函数由特定阶段...大致正确吗？

stages 返回唯一阶段（数字数组）。 stageColors 返回一个函数，因为它是一个计算的（getter），因此不带参数。如果你觉得这很混乱，你可以把它写成一个方法。此方法（返回的函数）接受一个阶段，按该阶段过滤数据条目并映射它们的颜色。如果您只想要唯一的颜色（假设在某些时候您会重复一些颜色），则必须将返回的整个数组包装成 [...new Set()]。

【参考方案2】：

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

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