title: Deleting the selected row on data table Vuetify
body: <p>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?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
    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");
          },
      }
    }
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
  &lt;div&gt;
  
      &lt;v-toolbar flat color="white"&gt;
        &lt;v-toolbar-title&gt;Manage Projects&lt;/v-toolbar-title&gt;   
        {{ props }}
      &lt;/v-toolbar&gt;
      
    &lt;v-data-table
      v-model="props"
      :headers="headers"
      :items="projects"
      item-key="name"
      select-all
      class="elevation-1"
    &gt;
      &lt;template slot="items" slot-scope="props"&gt;
        &lt;td&gt;
          &lt;v-checkbox
            v-model="props.selected"
            primary
            hide-details
          &gt;&lt;/v-checkbox&gt;
        &lt;/td&gt;
        &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
        &lt;td class="text-xs-left"&gt;{{ props.item.organisation }}&lt;/td&gt;
        &lt;td class="text-xs-left"&gt;{{ props.item.supplier }}&lt;/td&gt;
        &lt;td class="text-xs-left"&gt;{{ props.item.createdBy }}&lt;/td&gt;
        &lt;td class="text-xs-left"&gt;{{ props.item.updatedBy }}&lt;/td&gt;
       
      &lt;/template&gt;
    &lt;/v-data-table&gt;
  
     &lt;div class="text-xs-center pt-2"&gt;
        &lt;v-btn color="primary" @click="deleteProject"&gt;Delete&lt;/v-btn&gt;
        &lt;v-btn color="primary" @click="liveProject"&gt;Make Live&lt;/v-btn&gt;
         &lt;v-btn color="primary" @click="closeProject"&gt;Close&lt;/v-btn&gt;
         
         
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>