Vuetify - How to highlight row on click in v-data-table

Question

How to highlight the selected row in v-data-table? i tried to modified the data by adding flag variable selected in the Example

In the above example cli

Answer 1

Your solution does not work because the selected property is added to the data when you click on a row, but when data is reloaded then the data without a selected property replaces the old data.

So to make it work:
- add an id field to each item in the list of desserts
- add an selectedId with default value -1 to your data
- change the line of code in method activerow to this.selectedId = item.id;
- change the class attribute in the to :class="{'primary': props.item.id===selectedId}"

If on reload only your list of desserts changes, and the new list contains an item with the same id as selected before, then the same row should become selected.

I forked the codepen example to show you how this works:
https://codepen.io/anon/pen/PrWjxQ?editors=1010