Search code examples
vue.jsvuejs3vuetify.jsvuetifyjs3v-data-table

How to get the item of a v-data-table row?


I have a v-data-table (-virtual, which shouldn't matter) and I want to call a method with the item (user in users array) at the row I clicked.

<v-data-table-virtual
  v-model="selectedToDelete"
  :headers="headers"
  :items="users"
  :key="users"
  @click:row="editUser()"
/>

Is there any way to do it (best without using the item slot)?


(I am using Vuetify 3.3.15)


Solution

  • The click:row event gives Event, { item: DataTableItem } for the handlers. So you an implement your handler like the following to get the item and perform specific action with any of the item properties.

    handleRowClick(e, { item }) {
      console.log(item)
      // call any method here
    },
    

    See demo