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

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)