How to remove clicked row from v-data-table in Vuetify?

Question

I am learning Vuetify and am loading in data from a database to a Vuetify v-data-table. I would like to have a behaviour such that when I click on a row it is deleted from the table. Is this possible?

I am trying to get the index of the row from an onClick method but have had no success so far.

Please share the code you have – Carol Skelly Apr 22 '20 at 11:49 — Carol Skelly, Apr 22 '20 at 11:49

score 1 · Answer 1 · answered Apr 21 '20 at 20:30

You need to change your mindset, because you won't remove a row, you will remove a item of your list.

See code below:

<template>
  <div>
    <v-app>
      <v-content class="pa-4">
        <v-data-table :headers="headers" :items="validItems" @click:row="deleteItem" />
      </v-content>
    </v-app>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    items: [
      { id: 1, name: 'Option 1', description: 'Lorem ipsum dolor sit amet' },
      { id: 2, name: 'Option 2', description: 'Lorem ipsum dolor sit amet' },
      { id: 3, name: 'Option 3', description: 'Lorem ipsum dolor sit amet' },
      { id: 4, name: 'Option 4', description: 'Lorem ipsum dolor sit amet' },
      { id: 5, name: 'Option 5', description: 'Lorem ipsum dolor sit amet' },
      { id: 6, name: 'Option 6', description: 'Lorem ipsum dolor sit amet' },
      { id: 7, name: 'Option 7', description: 'Lorem ipsum dolor sit amet' },
      { id: 8, name: 'Option 8', description: 'Lorem ipsum dolor sit amet' },
      { id: 9, name: 'Option 9', description: 'Lorem ipsum dolor sit amet' },
    ],
    headers: [
      { text: 'Id', value: 'id' },
      { text: 'Name', value: 'name' },
      { text: 'Description', value: 'description' },
    ],
  }),
  computed: {
    validItems() {
      return this.items.filter(item => !item['deleted']);
    },
  },
  methods: {
    deleteItem(item) {
      this.$set(item, 'deleted', true);
    },
  },
};
</script>

In my example, I set a new property ('deleted') in item. But you can remove the element of array.

Did this answer solve your problem? Please accept this answer and this will help others people. [How to accept an answer?](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) — Gabriel Willemann, Apr 23 '20 at 11:36

How to remove clicked row from v-data-table in Vuetify?

1 Answers1