Suppression de la ligne sélectionnée dans la table de données Vuetify

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. 

J'ai eu un problème similaire hier mais avec jquery. Maintenant, avec vuejs, c'est en fait plus simple, je suppose, avec la liaison de modèle afin que toutes les lignes sélectionnées soient poussées vers une propriété de données. Ensuite, en cliquant sur Supprimer, parcourez tous les identifiants ou clés sélectionnés et supprimez-les de votre boutique ou en appelant une API backend ou votre propriété de données comme vous l'avez fait ici Par exemple

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
   }
}

Voici le code pour supprimer les lignes sélectionnées de votre table de données.

Consultez l'exemple ci-dessous.

Lien Codepen vers votre solution

Template=>

  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);
  }
    }
   }
}
})

Script => p>

    <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>

Si le Table de données est lié au tableau d'objets d'un magasin :

Nous pouvons également utiliser map pour obtenir l ' index de l'objet dans un tableau de stockage et le supprimer en utilisant:

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

Ici, l ' id est l'identifiant passé avec la charge utile à la MUTATION , on peut aussi transmettre uniquement le id dans son ensemble < code> charge utile . Dans ce cas, nous pouvons faire quelque chose comme:

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