how i can separate the buttons click event from row click event inside a row in a vuetify data-table

Question

#

how I can separate the buttons click event from row click event inside a row in a vuetify data-table, .....................................................................................................

for example:

when I click on the row

and when I click on the edit button it takes the event of the row click also

 <script> export default { data: () => ({ dialog: false, headers: [ { text: 'Dessert (100g serving)', align: 'start', sortable: false, value: 'name', }, { text: 'Calories', value: 'calories' }, { text: 'Fat (g)', value: 'fat' }, { text: 'Carbs (g)', value: 'carbs' }, { text: 'Protein (g)', value: 'protein' }, { text: 'Actions', value: 'action', sortable: false }, ], desserts: [], editedIndex: -1, editedItem: { name: '', calories: 0, fat: 0, carbs: 0, protein: 0, }, defaultItem: { name: '', calories: 0, fat: 0, carbs: 0, protein: 0, }, }), computed: { formTitle () { return this.editedIndex === -1 ? 'New Item' : 'Edit Item' }, }, watch: { dialog (val) { val || this.close() }, }, created () { this.initialize() }, methods: { initialize () { this.desserts = [ { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, }, { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, }, { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, }, { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, }, { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9, }, { name: 'Jelly bean', calories: 375, fat: 0.0, carbs: 94, protein: 0.0, }, { name: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0, }, { name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5, }, { name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, }, { name: 'KitKat', calories: 518, fat: 26.0, carbs: 65, protein: 7, }, ] }, rowClick(item, row){ alert('row clicked') }, editItem (item) { this.editedIndex = this.desserts.indexOf(item) this.editedItem = Object.assign({}, item) this.dialog = true }, deleteItem (item) { const index = this.desserts.indexOf(item) confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1) }, close () { this.dialog = false setTimeout(() => { this.editedItem = Object.assign({}, this.defaultItem) this.editedIndex = -1 }, 300) }, save () { if (this.editedIndex > -1) { Object.assign(this.desserts[this.editedIndex], this.editedItem) } else { this.desserts.push(this.editedItem) } this.close() }, }, } </script>

 <template> <v-data-table :headers="headers" :items="desserts" sort-by="calories" class="elevation-1" @click:row="rowClick" > <template v-slot:top> <v-toolbar flat color="white"> <v-toolbar-title>My CRUD</v-toolbar-title> <v-divider class="mx-4" inset vertical ></v-divider> <v-spacer></v-spacer> <v-dialog v-model="dialog" max-width="500px"> <template v-slot:activator="{ on }"> <v-btn color="primary" dark class="mb-2" v-on="on">New Item</v-btn> </template> <v-card> <v-card-title> <span class="headline">{{ formTitle }}</span> </v-card-title> <v-card-text> <v-container> <v-row> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="editedItem.calories" label="Calories"></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="editedItem.carbs" label="Carbs (g)"></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="editedItem.protein" label="Protein (g)"></v-text-field> </v-col> </v-row> </v-container> </v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn color="blue darken-1" text @click="close">Cancel</v-btn> <v-btn color="blue darken-1" text @click="save">Save</v-btn> </v-card-actions> </v-card> </v-dialog> </v-toolbar> </template> <template v-slot:item.action="{ item }"> <v-btn small="" fab icon=""> <v-icon small @click="editItem(item)" > mdi-pencil </v-icon> </v-btn> <v-btn small="" fab icon=""> <v-icon small @click="deleteItem(item)" > mdi-delete </v-icon> </v-btn> </template> <template v-slot:no-data> <v-btn color="primary" @click="initialize">Reset</v-btn> </template> </v-data-table> </template>

Answer 1

Use the stop modifier on the Edit button click event...

 <v-btn small="" fab icon="">
      <v-icon
        small
        @click.stop="editItem(item)"
      >
        mdi-pencil
      </v-icon>
 </v-btn>

Demo: https://codeply.com/p/JxeMtL6r51

Answer 2

Try to use stopevent modifier as follows :

  <v-btn color="blue darken-1" text @click.stop="close">Cancel</v-btn>
   v-btn color="blue darken-1" text @click.stop="save">Save</v-btn>