My column is duplicating and I don't understand why. It doesn't happen to the columns that don't have the class applied to them.
What can I do?
<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>
This is the array
Name: "John", Id: 10, NAME2: "Joey", IdParent: 16
Name: "Mike", Id: 11, NAME2: "Mark", IdParent: 19
Name: "Andrew", Id: 13, NAME2: "Mark", IdParent: 19
And this is the .children-row class style
.children-row {
padding-top: 6px;
}
.children-row:nth-child(odd) {
padding-top: 0px;
padding-bottom: 6px;
border-bottom: 1px solid #e5e5e5;
}
What i'm looking for is to have the objects which have the same Id, be grouped into the same table cell.
This is what i currently have, the problem is that the second row, shows up twice
Problem is here:
<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' : ''"
>
The div component with its content will be generated as many times as many there are items with the same Id (because of v-for directive). For those columns, you will also apply the children-row class because this is the case where (...).lenght will be bigger than one. (That's why you can see that all duplicated columns have children-row applied)
If you change the first v-for directive to iterate only on the rows with unique Id you should get rid of duplicate rows
<tr v-for="(item, key) in array.filter((el, index, self) => el.Id !== null && index === self.findIndex((e) => (e.Id === el.Id))" >