I am working on a functionality to delete individual rows from a table. Each row contains a delete icon that triggers a confirmation dialog when clicked. Upon clicking the "Yes" button in the dialog, the particular row should be removed.
The problem I am facing is that no matter which row I click on, it always ends up deleting the last row of the table.
Below is the code snippet I am currently using:
// Define the table
<v-data-table
:headers="headers"
:items="tableData"
:search="search"
>
<template v-slot:item.actions="{ item }">
<div class="table__icons">
<v-icon
small
class="mr-2"
@click="goToContract(item)"
>
mdi-pencil
</v-icon>
<a v-if="$route.name === 'pregled-ugovora' || $route.name === 'pregled-znsa'" :href="ispisRow(item)"
target="_blank">
<v-icon
small
>
mdi-download
</v-icon>
</a>
<v-icon
v-if="$route.name === 'pregled-znsa'"
small
@click="openDeleteModal(item)"
>
mdi-delete
</v-icon>
<v-icon v-if="$route.name === 'pregled-ugovora'"
small
@click="getIzvjestaj(item)"
>
mdi-note-text
</v-icon>
</div>
</template>
</v-data-table>
// Create the delete dialog box
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="text-h2 delete-text">Are you sure you want to delete this row?</v-card-title>
<v-card-actions>
<v-spacer></v-spacer>
<div class="m-btn delete-btn" @click="closeDeleteModal">No</div>
<div class="m-btn delete-btn" @click="deleteZnsConfirm">Yes</div>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
// Implement associated methods
openDeleteModal(item) {
this.deletedZnsIndex = this.tableData.indexOf(item)
this.deletedZns = Object.assign({}, item)
this.dialogDelete = true
},
closeDeleteModal(item) {
this.deletedZnsIndex = ''
this.deletedZns = {}
this.dialogDelete = false
},
deleteZnsConfirm(item) {
this.tableData.splice(this.tableData.indexOf(this.deletedZns), 1)
this.dialogDelete = false
},