Row is getting duplicated in Vue

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

Photo

Answer

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))" >