title: How to delete Specific row in a datatable?
body: <p><strong>I created data-table using vue and vuetify. Whenever I click delete icon on specific row a snackbar appears. In that snackbar there are two buttons yes and no. If i click yes button the specific row has to be deleted. how Can I achieve this</strong></p>
  
  <p>Here is the datatable and snackbar component</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
      &lt;v-snackbar
          :timeout="timeout"
          :top="y === 'top'"
          :bottom="y === 'bottom'"
          :right="x === 'right'"
          :left="x === 'left'"
          :multi-line="mode === 'multi-line'"
          :vertical="mode === 'vertical'"
          v-model="snackbar"
          :color="color"
      &gt;
          &lt;h3&gt;{{text}}&lt;/h3&gt;
          &lt;v-btn v-show="show" flat color="black" v-on:click="removeRow"&gt;Yes&lt;/v-btn&gt;
          &lt;!-- &lt;v-btn v-show="show" flat color="black" v-on:click="cancelRemove"&gt;No&lt;/v-btn&gt; --&gt;
      &lt;/v-snackbar&gt;
      &lt;v-card-title&gt;
          &lt;v-spacer&gt;&lt;/v-spacer&gt;
          &lt;v-text-field
              v-model="search"
              append-icon="search"
              label="Search"
              single-line
              hide-details
          &gt;&lt;/v-text-field&gt;
      &lt;/v-card-title&gt;
      &lt;v-data-table
          loading
          :headers="headers"
          :items ="rows"
          :search="search"
          class="elevation-1"
          disable-initial-sort
      &gt;
          &lt;template slot="items" slot-scope="props"&gt;
              &lt;td class="justify-center layout px-0"&gt;
                  &lt;v-btn icon class="mx-0" @click="editItem(props.item)"&gt;
                      &lt;v-icon color="teal"&gt;edit&lt;/v-icon&gt;
                  &lt;/v-btn&gt;
                  &lt;v-btn icon class="mx-0" @click="deleteItem(props.item)"&gt;
                      &lt;v-icon color="pink"&gt;delete&lt;/v-icon&gt;
                  &lt;/v-btn&gt;
              &lt;/td&gt;
              &lt;td&gt;{{props.item.firstName}}&lt;/td&gt;
              &lt;td&gt;{{props.item.lastName}}&lt;/td&gt;
              &lt;td&gt;{{props.item.loginName}}&lt;/td&gt;
              &lt;td&gt;{{props.item.customerName}}&lt;/td&gt;
              &lt;td&gt;{{props.item.phone}}&lt;/td&gt;
              &lt;td&gt;{{props.item.email}}&lt;/td&gt;
              &lt;!-- &lt;td&gt;{{props.item.password}}&lt;/td&gt; --&gt;
              &lt;td&gt;{{props.item.startDate}}&lt;/td&gt;
              &lt;td&gt;{{props.item.endDate}}&lt;/td&gt;
              &lt;td&gt;{{props.item.loginExpiry}}&lt;/td&gt;
              &lt;td&gt;{{props.item.approval}}&lt;/td&gt;
              &lt;td&gt;{{props.item.lang}}&lt;/td&gt;
              &lt;td&gt;{{props.item.grantee}}&lt;/td&gt;
              &lt;td&gt;{{props.item.description}}&lt;/td&gt;
          &lt;/template&gt;
      &lt;/v-data-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is the data()</p>
  
  <pre><code>data() {
      return {
        rows: [], // fetched from api
        search: "",
        snackbar: false,
        y: "top",
        x: "right",
        mode: "multi-line",
        timeout: 2000,
        text: 'Are you sure you want to delete this item?',
        color: 'error',
        show: true,
        yes: false,
        headers: [
          { text: "Actions", value: "name", sortable: false },
          { text: "First Name", value: "firstName", align: "left" },
          { text: "Last Name", value: "lastName" },
          { text: "Login Name", value: "loginName" },
          { text: "Customer Name", value: "customerName" },
          { text: "Phone", value: "phone" },
          { text: "Email", value: "email" },
          // {text: 'Password', value: 'password'},
          { text: "Start Date", value: "startDate" },
          { text: "End Date", value: "endDate" },
          { text: "Login Expiry", value: "loginExpiry" },
          { text: "Is Approval User", value: "approval" },
          { text: "Language", value: "lang" },
          { text: "Grantee Allowed", value: "grantee" },
          { text: "Description", value: "description" }
        ]
      };
    },
  </code></pre>
  
  <p>here is the script</p>
  
  <pre><code>deleteItem(item) {
          this.snackbar = true;
          this.text = "Are you sure?"
          this.timeout=2000;
          this.color="success"
  //currently using this method
          const index = this.rows.indexOf(item)
      },
      removeRow(){
         // How to delete specific row whenever I click on  this event
      }
  </code></pre>