CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.jsvuejs3
Sameer Pusegaonkar
Sameer Pusegaonkar

Reputation: 143

How to get a specific data value in a data table when clicked - VueJS?

I have a v-data-table that has some generic employee data. I wanted to know if I could get the exact value which I clicked on.

My current code is simple & a snippet of it looks like this.

EDIT: I am utilizing the CRUD-Actions Example from the official vuetify documentation: https://vuetifyjs.com/en/components/data-tables/

<v-data-table 
    :headers="headers" 
    :items="rows" 
    item-key="name" 
    :search="search" >

    <template v-slot:top>
        <!-- A dailog box is present here to edit the rows-->                   
    </template>

    <template v-slot:item.actions="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">
            mdi-pencil
        </v-icon>
    </template>

</v-data-table>

Also, is it possible to get its column name? (headers in the above code) Thanks!

Upvotes: 1

Views: 3747

Answers (1)

Hans Felix Ramos
Hans Felix Ramos

Reputation: 4424

Acording to documentation of v-data-table https://vuetifyjs.com/en/components/data-tables/ you can use the item slot:

<v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  >    
    <template v-slot:item="props">
       <tr>      
          <td v-for="(prop, key) in props.item" :key="key" @click="onClickItem(key, props.item[key])">{{props.item[key]}}</td>
       </tr>
    </template>
</v-data-table>

And get the item:

methods:{
  onClickItem(columName, value) {
     console.log(columName, value)
  },
}

UPDATE

If you are want to add another column like actions, not use v-slot:item.actions slot, because v-slot:item will override it. Modify this prop to get the desired result.

<v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  >    
    <template v-slot:item="props">
     <tr>
      <td v-for="(prop, key) in props.item" :key="key" @click="onClickItem(key, props.item[key])">{{props.item[key]}}</td>

      <!-- This is for actions -->
      <td>
        <v-icon small class="mr-2" @click="editItem(item)">
          mdi-pencil
        </v-icon>
        <v-icon small @click="deleteItem(item)">
          mdi-delete
        </v-icon>
      </td>
     </tr>
    </template>
</v-data-table>

Check this codepen: https://codepen.io/hans-felix/pen/bGVzoOj

Upvotes: 2

Related Questions