Mi columna se está duplicando y no entiendo por qué. No sucede con las columnas que no tienen la clase aplicada.
¿Que puedo hacer?
<tr v-for="(item, key) in array.filter(el => el.Id !== null)"> <td>@{{ key + 1 }}.</td> <td> <div v-for="subitem in array.filter(el => el.Id === item.Id)" v-bind:class="array.filter(el => el.Id === item.Id).length > 1 ? 'children-row' : ''" > @{{ subitem.NAME }} <span"> <i> edit </i> </span> </div> </td> <td> @{{ item.NAME2 }} </td> </tr>esta es la matriz
Name: "John", Id: 10, NAME2: "Joey", IdParent: 16 Name: "Mike", Id: 11, NAME2: "Mark", IdParent: 19 Name: "Andrew", Id: 13, NAME2: "Mark", IdParent: 19Y este es el estilo de clase .children-row
.children-row { padding-top: 6px; } .children-row:nth-child(odd) { padding-top: 0px; padding-bottom: 6px; border-bottom: 1px solid #e5e5e5; }Lo que estoy buscando es tener los objetos que tienen la misma identificación, agrupados en la misma celda de la tabla.
Esto es lo que tengo actualmente, el problema es que la segunda fila aparece dos veces
El problema está aquí:
<div v-for="subitem in array.filter(el => el.Id === item.Id &&)" v-bind:class="array.filter(el => el.Id === item.Id).length > 1 ? 'children-row' : ''" >El componente div con su contenido se generará tantas veces como elementos haya con el mismo Id (debido a la directiva v-for). Para esas columnas, también aplicará la clase child-row porque este es el caso donde (...). la longitud será mayor que uno. (Es por eso que puede ver que todas las columnas duplicadas tienen filas secundarias aplicadas)
Si cambia la primera directiva v-for para iterar solo en las filas con ID único, debe deshacerse de las filas duplicadas
<tr v-for="(item, key) in array.filter((el, index, self) => el.Id !== null && index === self.findIndex((e) => (e.Id === el.Id))" >