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

Question

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!

Hans Felix Ramos · Accepted Answer · 2020-05-21 19:31:08Z

2

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

edited May 21, 2020 at 19:31

answered May 18, 2020 at 22:20

Hans Felix Ramos

4,4543 gold badges19 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sameer Pusegaonkar Over a year ago

Hey, I switched to a CRUD actions v-data-table? Could you please guide me on how I could integrate the above code with that? I have made some changes to the question provided above. Please have a look

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related