Vuetify expandable table expanding all rows with the same name

1
votes

In the basic code pen for the expandable tables in Vuetify I noticed that when the names of two entries in the table are the same, clicking on row to expand also expands the other row with the same name entries. Is there a way to avoid this?

Here is the problem recreated: https://codepen.io/entropy283/pen/eYJdmLp?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fdata-tables%2F (clicking on the first row expands the second row as well)

1
vue.jsvuetify.js

1 Answers

2
votes

This is happening because name is the item-key on the datatable. Use a different item-key...

<v-data-table
  :headers="headers"
  :items="desserts"
  :single-expand="singleExpand"
  :expanded.sync="expanded"
  item-key="id"
  show-expand
  class="elevation-1"
>
...
</v-data-table>

Demo: https://codeply.com/p/VJn8sEMr45