0
256
ViewsVue: 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 answers
Answer question0
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
Report
Answer question