Deleting the selected row on data table Vuetify

Question

I am using a data-table in vuetify. I am using v-checkbox. I want to delete the selected item from v-checkbox using a button click. I have delete button at the bottom of the data table. So when a user clicks at the delete button the selected row in the data table should be deleted. Any ideas how to do it?

<script>
  export default {
    data () {
      return {
        props:[],
        selected: [],
        headers: [
          {
            text: 'Name',
            align: 'left',
            sortable: true,
            value: 'name'
          },
          { text: 'Organisation', value: 'organisation' },
          { text: 'Supplier', value: 'supplier' },
          { text: 'Created By', value: 'createdBy' },
          { text: 'Updated By', value: 'updatedBy' },
       
        ],
        projects: [
          {
            name: 'test',
            organisation: 'test',
            supplier: 'test',
            createdBy: 'test',
            updatedBy: 'test'
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%'
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%'
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%'
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16%'
          },
          {
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: '0%'
          },
          {
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2%'
          },
          {
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: '45%'
          },
          {
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: '22%'
          },
          {
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6%'
          }
        ]
      }
    },

    methods: {
        deleteProject
        {
            // delete funtion here
        },

        liveProject()
        {
            alert("live");
        },

        closeProject()
        {
            alert("close");
        },
    }
  }
</script>

<template>
<div>

    <v-toolbar flat color="white">
      <v-toolbar-title>Manage Projects</v-toolbar-title>   
      {{ props }}
    </v-toolbar>
    
  <v-data-table
    v-model="props"
    :headers="headers"
    :items="projects"
    item-key="name"
    select-all
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      <td>
        <v-checkbox
          v-model="props.selected"
          primary
          hide-details
        ></v-checkbox>
      </td>
      <td>{{ props.item.name }}</td>
      <td class="text-xs-left">{{ props.item.organisation }}</td>
      <td class="text-xs-left">{{ props.item.supplier }}</td>
      <td class="text-xs-left">{{ props.item.createdBy }}</td>
      <td class="text-xs-left">{{ props.item.updatedBy }}</td>
     
    </template>
  </v-data-table>

   <div class="text-xs-center pt-2">
      <v-btn color="primary" @click="deleteProject">Delete</v-btn>
      <v-btn color="primary" @click="liveProject">Make Live</v-btn>
       <v-btn color="primary" @click="closeProject">Close</v-btn>
       
       
    </div>
</div>

</template>

Answer 1

Here is the code for deleting selected rows from your data table.

Check the example below.

Codepen link to your solution

Template=>

    <div id="app">
  <v-app id="inspire">
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="desserts"
      item-key="name"
      select-all
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td>
          <v-checkbox
            v-model="props.selected"
            primary
            hide-details
          ></v-checkbox>
        </td>
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
    </v-data-table>
    <div>
      <v-btn color="primary" @click="deleteItem">Delete</v-btn>
    </div>
  </v-app>
</div>

Script =>

  new Vue({
  el: '#app',
  data () {
    return {
      selected: [],
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          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' }
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%'
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%'
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%'
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%'
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%'
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%'
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%'
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%'
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%'
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%'
        }
      ]
    }
  },
  methods: {
   deleteItem () {
   if(confirm('Are you sure you want to delete this item?')){
  for(var i = 0; i <this.selected.length; i++){
      const index = this.desserts.indexOf(this.selected[i]);
      this.desserts.splice(index, 1);
  }
    }
   }
}
})

Answer 2

deleteProject(item_name){
    this.projects.splice(this.projects.findIndex(e=> e.name == item_name),1)
}

// JS splice method for remove items from an array.
// JS findIndex method for find the index of the element which you want to delete. 

Answer 3

I had a similar issue yesterday but with jquery. Now with vuejs, it is actually simpler I guess with model binding so that all the selected rows will be pushed to a data property. Then on clicking delete, loop through all the selected id's or keys and remove them from your store or by calling a backend api or your data property like you've done here E.g.

data: () => ({
    selected: [],
    projects: {/*...content in here */},
});

methods: {

   delete() {
       this.selected.forEach(function(project) { // project here is just the index of the selected in the projects array
           projects.splice(project, 1);
      });

      this.selected = []; // don't forget to empty selected
   }
}

Answer 4

If the Data table is bound to a store's array of objects :

---

We can also use map to get the index of the object in a store array and remove it using:

Mutation

REMOVE_OBJECT_FROM_ARRAY: (state, payload) => { let i = state.someArrayofObjects.map(item => item.id).indexOf(payload.id); state.someArrayofObjects.splice(i, 1); }

Here, the id is the id passed with the payload to the MUTATION, we can also pass only the id as the whole payload. In that case, we can do something like:

REMOVE_OBJECT_FROM_ARRAY: (state, payload) => { let i = state.someArrayofObjects.map(item => item.id).indexOf(payload); state.someArrayofObjects.splice(i, 1); }