Tengo un objeto que contiene pares de datos que me gustaría mostrar según la categoría. Creo que esto tiene que ver con los bucles v-for anidados, pero tengo problemas para encontrar la forma correcta de hacerlo.
categoryArray = {stage 1, red}, {stage 1, blue}, {stage 2, orange}, {stage 3, brown}, {stage 2, green}Visualización deseada: Etapa 1: rojo, azul Etapa 2: naranja Etapa 3: marrón
Todavía no tengo un código viable. Mi estrategia ha sido crear una serie de Etapas únicas, usarlas para mostrar las Etapas, pero no sé cómo iterar los elementos dentro de las etapas.
Obtener las etapas:
let stagesArray = []; categoryArray.value.forEach((entry, index) => { stagesArray.push(entry.stageNumber); }); //creating array of unique stages uniqueRooms.value = [...new Set(stagesArray)]; })Lo anterior funciona para obtener la variedad única de habitaciones.
<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>Estoy afuera sobre mis esquís. Solo necesito algunas pistas sobre cómo recorrer la categoría principal (etapa), con valores únicos, y luego mostrar todos los colores coincidentes dentro de esa categoría.
Esto parece muy cercano, pero no puedo encontrar la manera de obtener etapas únicas de esto. Bucle anidado en Vue
¿Es esto lo que estás buscando?
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>Tienes el mismo índice para ambos bucles, por lo que está mal.
<div v-for="(stage, index) in uniqueRooms" :key="index"> ---- {{ room }} <div v-for="(color, index) in filterStages" :key="index"> -----