0
249
VistasVue: Cómo deshacerse del contenido duplicado
Tengo una variedad de nombres usando v-for. Obtengo los nombres, como puede ver, tengo dos v-fors donde el contenido está duplicado. En este ejemplo, mi contenido es pequeño y no parece tan aterrador en la vida real como puede serlo. mucho más grande y todo el problema es que el contenido se repite, traté de aplicar tragamonedas pero no pude hacer frente
Modelo
<template> <div> <div v-for="(item, index) in array" :key="index" class="names"> <div class="show-names"> <p>{{ item.name }}</p> </div> <div v-for="(girlNames, index) in item.girlNames" :key="index" class="names" > <div class="show-names"> <p>{{ girlNames.name }}</p> </div> </div> </div> </div> </template>Guion
<script> export default { data() { return { array: [ { name: "Alex" }, { name: "Jacob" }, { name: "Robert" }, { girlNames: [ { name: "Anna", }, { name: "Kiwi", }, { name: "Ava", }, ], }, ], }; }, }; </script>Sí, esta imagen muestra dónde se repite el contenido.
También puede ver el ejemplo de código en codesandbox
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
El único problema que veo aquí es una mala estructura de datos. En mi opinión, debería ser un objeto con dos campos, que separe en su caso a niños y niñas, y en este objeto debería haber datos reales:
<script> export default { data() { return { names: { boys: [ { name: "Alex" }, { name: "Jacob" }, { name: "Robert" }, ], girls: [ { name: "Anna" }, { name: "Kiwi" }, { name: "Ava" }, ] } }, ], }; }, }; </script> Su código en template será como:
<template> <div> <div class="names"> <div v-for="(item, index) in name.boys" :key="index" class="show-names"> <p>{{ item.name }}</p> </div> <div v-for="(item, index) in name.girls" :key="index" class="show-names"> <p>{{ item.name }}</p> </div> </div> </div> </template>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta