CODEWITHSUNDEEP
vue.jsvuetify.js
entropy283
entropy283

Reputation: 97

Vuetify expandable table expanding all rows with the same name

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)

Upvotes: 3

Views: 4016

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362780

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

Upvotes: 4

Related Questions