title: Delete selected table row VueJS?
body: <p>I am using a Vuetify data table and rendering the headers and item props using Vuex. i want to only delete the row/rows which have been selected. I have set up a method <code>deleteRow</code> but right now it seems to delete the last row by defualt. </p>
  
  <p>See this working <a href="https://codesandbox.io/s/recursing-joliot-svc4n?file=/src/components/HelloWorld.vue" rel="nofollow noreferrer">CodeSandbox</a>.</p>
  
  <p>This is the table Component:-</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;v-data-table
        v-model="selected"
        :headers="getHeaders"
        :items="getDesserts"
        hide-actions
        select-all
        item-key="name"
      &gt;
        &lt;template v-slot:headers="props"&gt;
          &lt;tr&gt;
            &lt;th&gt;
              &lt;v-checkbox
                :input-value="props.all"
                :indeterminate="props.indeterminate"
                primary
                hide-details
                @click.stop="toggleAll"
              &gt;&lt;/v-checkbox&gt;
            &lt;/th&gt;
            &lt;th v-for="header in props.headers" :key="header.text"&gt;
              &lt;v-icon small&gt;arrow_upward&lt;/v-icon&gt;
              {{ header.text }}
            &lt;/th&gt;
          &lt;/tr&gt;
        &lt;/template&gt;
        &lt;template v-slot:items="props"&gt;
          &lt;tr :active="props.selected" @click="props.selected = !props.selected"&gt;
            &lt;td&gt;
              &lt;v-checkbox :input-value="props.selected" primary hide-details&gt;&lt;/v-checkbox&gt;
            &lt;/td&gt;
            &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
            &lt;td&gt;{{ props.item.calories }}&lt;/td&gt;
            &lt;td&gt;{{ props.item.fat }}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/template&gt;
      &lt;/v-data-table&gt;
      &lt;v-btn @click="deleteRow"&gt;Delete Selected&lt;/v-btn&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapGetters, mapMutations } from "vuex";
  export default {
    name: "HelloWorld",
    data() {
      return {
        selected: []
      };
    },
    computed: {
      ...mapGetters({
        getHeaders: "getHeaders",
        getDesserts: "getDesserts"
      })
    },
    methods: {
      ...mapMutations({
        deleteRow: "deleteRow"
      }),
      toggleAll() {
        if (this.selected.length) this.selected = [];
        else this.selected = this.getDesserts.slice();
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>And this is my Vuex store:-</p>
  
  <pre><code>import Vue from "vue";
  import Vuex from "vuex";
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
    state: {
      headers: [
        {
          text: "Dessert (100g serving)",
          align: "left",
          value: "name"
        },
        { text: "Calories", value: "calories" },
        { text: "Fat (g)", value: "fat" }
      ],
      desserts: [
        {
          value: false,
          name: "Lollipop",
          calories: 159,
          fat: 6.0
        },
        {
          value: false,
          name: "Marshamallow",
          calories: 262,
          fat: 16.0
        }
      ]
    },
    getters: {
      getHeaders: state =&gt; state.headers,
      getDesserts: state =&gt; state.desserts
    },
    mutations: {
      deleteRow(state, name) {
        let index = state.desserts.findIndex(el =&gt; el.name === name);
        state.desserts.splice(index, 1);
      }
    }
  });
  </code></pre>