CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Lykas
Lykas

Reputation: 120

Vuetify, how to get row by double click event in v-data-table

I need to get row by event but it only give me event and undefeated, how to catch items in v-data-table

<v-data-table
          :headers="showHeaders"
          :page="page"
          :pageCount="numberOfPages"
          :options.sync="options"
          :loading="loading"
          :server-items-length="totalItems"
          :items="items"
          :items-per-page="15"
          class="mainTable"
          @dblclick:row="editItem(item, $event )"
          :footer-props="{
      showFirstLastPage: true,
      firstIcon: 'mdi-arrow-collapse-left',
      lastIcon: 'mdi-arrow-collapse-right',
      prevIcon: 'mdi-minus',
      nextIcon: 'mdi-plus'
    }"

---method---

    editItem (item, e) {
  console.log(item)
  this.editedIndex = this.items.indexOf(item)
  this.editedItem = Object.assign({}, item)
  this.dialog = true
},

what i've got

only event but if i will transmits item it will be undefeated

Upvotes: 3

Views: 5459

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

No need to mention the parameters in the template :

@dblclick:row="editItem"

Note that the first parameter is the event and the second one is the row with following properties :

 {
  expand: (value: boolean) => void,
  headers: DataTableHeader[],
  isExpanded: boolean,
  isMobile: boolean,
  isSelected: boolean,
  item: any,
  select: (value: boolean) => void
}

the correct method :

editItem (event, {item}) {
  console.log(item)
  this.editedIndex = this.items.indexOf(item)
  this.editedItem = Object.assign({}, item)
  this.dialog = true
},

Upvotes: 6

Related Questions