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

Question

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>

Michal Levý · Accepted Answer · 2020-10-17 22:05:28Z

4

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>

answered Oct 17, 2020 at 22:05

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

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

1 Comment

SRR Over a year ago

Event bubbling completely slipped my mind. Worked like a charm!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related