CODEWITHSUNDEEP
vue.jsvuetify.js
SRR
SRR

Reputation: 1748

Duplicate click event in v-data-table with action buttons column

In vuetify I want to display item data when any part of the row is clicked or delete an item if a button in the row is clicked.

However, if I click the delete button the two events fire. I tried using @click:row.self='viewItem' but that doesn't seem to work.

    <template>
      <v-data-table
        dense
        :headers="headers"
        :items="desserts"
        item-key="name"
        class="elevation-1"
        @click:row.self="viewItem" //this fires when the delete button is clicked
      >
        <template v-slot:item.actions="{ item }">
          <v-icon small @click="viewItem(item)">mdi-export</v-icon> //see item details
          <v-icon small class="mr-2" @click="confirmDeleteOfItem(item)">mdi-delete</v-icon> //delete item
        </template>
      </v-data-table>
    </template>
    
    <script>
      export default {
        data: () => ({
          desserts: [
            {
              name: 'Frozen Yogurt',
              calories: 159,
            },
          ],
          headers: [
            {
              text: 'Dessert (100g serving)',
              align: 'start',
              sortable: false,
              value: 'name',
            },
            { text: 'Calories', value: 'calories' },
          ],
        }),
      }
    </script>

Upvotes: 0

Views: 962

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37803

No, the problem is in your item.actions slot - you need to stop click event bubbling from your icons to a table row when your icon is clicked, try this:

<template v-slot:item.actions="{ item }">
      <v-icon small @click.stop="viewItem(item)">mdi-export</v-icon>
      <v-icon small class="mr-2" @click.stop="confirmDeleteOfItem(item)">mdi-delete</v-icon> 
</template>

Upvotes: 4

Related Questions