Can’t expand only one element on my v-data-table

[Acenollari]

Problem: All rows expand at the same time in my v-data-table

I’m using Vuetify’s <v-data-table> component and trying to implement expandable rows. However, when I try to expand a single row, all the rows get expanded instead of just the one I clicked on.

Here’s a simplified version of my code:

<v-data-table
:items-per-page=”-1″
v-model=”selectedMenuItem”
item-key=”menu_item_id”
show-select
:headers=”menuHeaders”
class=”custom-elevation-header flex-table”
:items=”
menuSchemaCp && menuSchemaCp[0] && menuSchemaCp[0].details
”
:show-expand=”false”
multi-sort
:mobile=”mobile”
>
<template v-slot:expanded-row=”{ columns, item }”>
<td :colspan=”columns.length” class=”td-colspan”>
<v-data-table
:items-per-page=”-1″
hide-default-footer
item-key=”menu_sub_item_id”
:headers=”subMenuHeaders”
:items=”item.details”
disable-sort
v-model=”selectedSubMenuItem”
show-select
class=”elevation-1″
:mobile=”mobile”
>
</v-data-table>
</td>
</template>
</v-data-table>

[Acenollari]

Solution: Use item-value in Vuetify 3 to prevent all rows from expanding at once

In Vuetify 3, when using <v-data-table> with expandable rows, it’s important to specify a unique identifier for each item using the item-value prop. If you don’t, Vuetify can’t properly track which row is being expanded, and as a result, all rows might expand at the same time.

To fix this, just add:
item-value=”menu_item_id”

Where menu_item_id is a unique key for each row item. Here’s how it looks in context:
<v-data-table
item-value=”menu_item_id”
:items=”menuSchemaCp[0]?.details”
:headers=”menuHeaders”
show-expand
…
>
This ensures that Vuetify correctly manages the expanded state for individual rows.
 

[Author]

Posts