Vuetify - How to highlight row on click in v-data-table
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 <tr>
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
<v-data-table @click:row="rowClick" item-key="name" single-select ...
methods: {
rowClick: function (item, row) {
row.select(true);
//item.name - selected id
}
}
<style>
tr.v-data-table__selected {
background: #7d92f5 !important;
}
</style>
or
<style scoped>
/deep/ tr.v-data-table__selected {
background: #7d92f5 !important;
}
</style>
Example https://codepen.io/nicolai-nikolai/pen/GRgLpNY