英文:
Deleting row in Vuetify data table always removes the last row
问题
我正在尝试实现从表格中删除单个行的功能。每一行都有一个删除图标，当点击时会打开一个确认对话框。如果用户点击"Yes"按钮，那么应该删除该特定行。
然而，问题是无论我点击哪一行，表格的最后一行总是被删除。
以下是我的代码：
// 表格
<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>
// 删除对话框
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="text-h2 delete-text">您确定要删除这一行吗？</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>
// 方法
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
},
希望这有助于解决您的问题。如果您有任何其他问题，请随时提出。
英文:
I'm trying to implement deleting of individual rows from table. Each row has a delete icon that opens a confirm dialog when clicked. If the user clicks the "Yes" button, that specific row should be deleted.
However, the issue is that no matter what row I click, the last row of table is always deleted.
Here is my code:
// 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>
// delete dialog
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="text-h2 delete-text">Do you want to remove 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>
// 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
},
答案1
得分: 0
我弄清楚了...
不是这样的：
deleteZnsConfirm(item) {
this.tableData.splice(this.deletedZns), 1)
this.dialogDelete = false
},
我的删除函数应该像这样：
deleteZnsConfirm(item) {
this.tableData.splice(this.deletedZnsIndex, 1)
this.dialogDelete = false
},
我在切割 tableData 时使用了错误的索引 
英文:
Oh I figured it out...
Instead of this:
deleteZnsConfirm(item) {
this.tableData.splice(this.tableData.indexOf(this.deletedZns), 1)
this.dialogDelete = false
},
My delete function should look like this:
deleteZnsConfirm(item) {
this.tableData.splice(this.deletedZnsIndex, 1)
this.dialogDelete = false
},
I was using the wrong index while splicing tableData
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论