I found a way around it using @click:row
<v-data-table :headers="headers" :items="desserts" :items-per-page="5"
class="elevation-1" @click:row="handleClick">
</v-data-table>
The handleClick
function returns a value of the clicked item so I call the method I want to act upon the value within the handleClick
method. I also manually highlighted the clicked row since I didn’t find a Vuetify way of doing so.
An example of the handleClick method is here:
handleClick(value) {
this.highlightClickedRow(value);
this.viewDetails(value);
},
You can also access the clicked row using event.target. Example is here
highlightClickedRow(value) {
const tr = value.target.parentNode;
tr.classList.add('highlight');
},