Javascript 如何删除数据表中的特定行？

我使用vue和vuetify创建了数据表。每当我单击特定行上的“删除”图标时，就会出现一个快捷键。在snackbar中有两个按钮yes和no。如果单击yes按钮，则必须删除特定行。我如何才能做到这一点

下面是datatable和snackbar组件

<template>
<div>
    <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"
    >
        <h3>{{text}}</h3>
        <v-btn v-show="show" flat color="black" v-on:click="removeRow">Yes</v-btn>
        <!-- <v-btn v-show="show" flat color="black" v-on:click="cancelRemove">No</v-btn> -->
    </v-snackbar>
    <v-card-title>
        <v-spacer></v-spacer>
        <v-text-field
            v-model="search"
            append-icon="search"
            label="Search"
            single-line
            hide-details
        ></v-text-field>
    </v-card-title>
    <v-data-table
        loading
        :headers="headers"
        :items ="rows"
        :search="search"
        class="elevation-1"
        disable-initial-sort
    >
        <template slot="items" slot-scope="props">
            <td class="justify-center layout px-0">
                <v-btn icon class="mx-0" @click="editItem(props.item)">
                    <v-icon color="teal">edit</v-icon>
                </v-btn>
                <v-btn icon class="mx-0" @click="deleteItem(props.item)">
                    <v-icon color="pink">delete</v-icon>
                </v-btn>
            </td>
            <td>{{props.item.firstName}}</td>
            <td>{{props.item.lastName}}</td>
            <td>{{props.item.loginName}}</td>
            <td>{{props.item.customerName}}</td>
            <td>{{props.item.phone}}</td>
            <td>{{props.item.email}}</td>
            <!-- <td>{{props.item.password}}</td> -->
            <td>{{props.item.startDate}}</td>
            <td>{{props.item.endDate}}</td>
            <td>{{props.item.loginExpiry}}</td>
            <td>{{props.item.approval}}</td>
            <td>{{props.item.lang}}</td>
            <td>{{props.item.grantee}}</td>
            <td>{{props.item.description}}</td>
        </template>
    </v-data-table>
</div>

这是剧本

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
    }

---

在这种需求中，我通常使用数据

rowtodelet

deleteItem (item) {
    this.snackbar = true;
    this.text = "Are you sure?"
    this.timeout = 2000;
    this.color = "success"
    this.rowToDelete = item
},

removeRow(){
    const index = this.rows.indexOf(this.rowToDelete)
    // Then remove your item from rows
    // And on success, reset rowToDelete: this.rowToDelete = null
}

deleteItem (item) {
    this.snackbar = true;
    this.text = "Are you sure?"
    this.timeout = 2000;
    this.color = "success"
    this.rowToDelete = item
},

removeRow(){
    const index = this.rows.indexOf(this.rowToDelete)
    // Then remove your item from rows
    // And on success, reset rowToDelete: this.rowToDelete = null
}