CODEWITHSUNDEEP
vue.jsvuetify.js
Michael Von Bargen
Michael Von Bargen

Reputation: 132

Vuetify data-table supress click on row in cell

I want to show a dialog if I click on a row in a vuetiy v-data-table. Furthermore I have one column in this table which has a button that I want to use as well.

If I click this button the click on the row and the button is registered. Both functions are executed. Is there a way to not execute the click on the row?

<v-data-table :headers="headers" :items="items" @click:row="openRecipe">
  <template v-slot:item.actions="{ item }">
    <v-icon
     small
     @click="edit(item)"
    >mdi-pencil</v-icon>
  </template>
</v-data-table>

Upvotes: 7

Views: 5813

Answers (1)

Eggon
Eggon

Reputation: 2356

You should add stop (which stops propagation of the click event) to your button's click listener like this: @click.stop="edit(item)". You might want to add prevent as well. @click.stop.prevent;

More on this here

Upvotes: 13

Related Questions