Vue: bucle for anidado, la condición v-if interna no funciona
Tengo este código para mostrar elementos en la colorsmatriz como pares de dos colores:
TestNested.vue :
<template>
<div class="container">
<div v-for="(first, i) in this.colors" v-bind:key="first">
<div v-for="(second, j) in this.colors" v-bind:key="second"
v-if="first === 'GREEN' && second==='BLUE'"
>
{{first + "-" + second}}
</div>
</div>
</div>
</template>
<script>
export default {
name: "TestNested",
data() {
return {
isDone: false,
colors: []
}
},
created() {
this.colors.push("RED");
this.colors.push("GREEN");
this.colors.push("BLUE");
this.isDone = true;
}
}
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
div {
margin: 0.5em;
}
</style>
Muestra:
Si agrego una ifcondición dentro del segundo forbucle:
<div v-for="(second, j) in this.colors" v-bind:key="second"
v-if="first === 'GREEN'"
>
Solo muestra un par de colores que comienza con GREEN:
Sin embargo, si agrego una segunda condición, solo mostraré pares que comiencen GREENy terminen con BLUE:
<div v-for="(second, j) in this.colors" v-bind:key="second"
v-if="first === 'GREEN' && second === 'BLUE'"
>
no se muestra nada.
¿ Por qué no GREEN-BLUEse muestra un par? ¿Cómo lo soluciono?
La razón por la cual el par VERDE-AZUL no se muestra cuando agrega la segunda condición a la directiva v-if es que el segundo bucle for está iterando sobre la matriz de colores en el mismo orden que el primer bucle for. Esto significa que cuando el primer bucle for itera sobre el elemento VERDE, el segundo bucle for también itera sobre el elemento VERDE, y la directiva v-if solo es verdadera cuando el segundo bucle for también itera sobre el elemento AZUL. Para solucionar este problema, puede modificar el segundo bucle for para comenzar a iterar desde el índice del elemento actual en el primer bucle for. De esta manera, el segundo bucle for solo iterará sobre los elementos que vienen después del elemento actual en el primer bucle for.
<div v-for="(first, i) in colors" :key="first">
<div v-for="(second, j) in colors.slice(i + 1)" :key="second"
v-if="first === 'GREEN' && second === 'BLUE'">
{{ first + '-' + second }}
</div>
</div>