How can I add a click event to the v-data-table?

Question

I want to call the editItem function when the table row is clicked. Current what happens is I click on the table row and it doesn't display the details page. Yet when I put this click event on a particular table data the editItem function gets called. How can I make this same function to be called on the table row itself?

Here in my code I have tried using the the v-data-table template and slot and included the click event on the row but it is not working either

<template slot="items" slot-scope="props">    <tr @click="editItem(item), selected = item.id">       <td>{{ props.item.member }}</td>       <td>{{ props.item[1] }}</td>       <td>{{ props.item[2] }}</td>       <td>{{ props.item[3] }}</td>       <td>{{ props.item[4] }}</td>       <td>{{ props.item[5] }}</td>       <td>{{ props.item[6] }}</td>       <td>{{ props.item[7] }}</td>       <td>{{ props.item[8] }}</td>       <td>{{ props.item[9] }}</td>       <td>{{ props.item[10] }}</td>       <td>{{ props.item[11] }}</td>       <td>{{ props.item[12] }}</td>       <td>{{ props.item[13] }}</td>     </tr> </template> 

I expect that when the row is clicked, the editItem function is called

Answer 1

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'); },