[Vuejs]-@click:row not triggered in v-data-table (Vuetify)

by

5👍

✅

Try setting up the row click like this:

@click:row="(item) => booking_clicked(item)"

Update

Check this codesanbox I made: https://codesandbox.io/s/stack-70203336-32vby?file=/src/components/DataTableActions.vue

If you want to add an extra column to your v-data-table there’s no need to use the main ìtem slot, unless you want to modify the whole row. If all you want to do is add like example a delete button. You just need to add it to the headers array first. On my example I added an extra column for actions.

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: 'Iron (%)', value: 'iron' },
   { text: 'Actions', value: 'actions'}
],

After that, all you need to do is customize the slot for the actions column, inside your v-data-table. Also, to avoid the @click:row effect when you click your delete button you need to use @click.stop on your delete button.

<v-data-table
   :headers="headers"
   :items="desserts"
   :items-per-page="5"
   class="elevation-1"
   @click:row="(item) => dessertRowlicked(item)"
>
   <template  #item.actions="{ item }">
      <v-icon color="primary" @click.stop="deleteDessert(item)">mdi-delete</v-icon>
   </template>
</v-data-table>
👤cmfc31

Leave a comment