vue.js - 使用对话框中的删除按钮删除 Vuetify 数据表中的行
问题描述
我有数据表,每行都有一个编辑和删除图标。当使用下面的代码并按下删除图标时,我会弹出一个系统,并且该行会按照我想要的方式删除。很完美。
<template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
<v-icon small text @click="deleteItem(item)">mdi-delete</v-icon>
</template>
方法脚本:
deleteItem(item) {
const index = this.companies.indexOf(item);
confirm("Are you sure you want to delete this item?") &&
this.companies.splice(index, 1);
},
现在我想要一个漂亮的对话框而不是系统弹出窗口。就像在https://codepen.io/anon/pen/pYzZPZ?editors=1010中一样。
所以我做了这个代码:
<template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
<v-icon small @click="dialog2 = true">mdi-delete</v-icon>
<v-dialog v-model="dialog2" max-width="500px">
<v-card>
<v-card-title>Verwijderen</v-card-title>
<v-card-text>Weet je zeker dat je {{item.name}} wenst te verwijderen?</v-card-text>
<v-card-actions>
<v-btn color="primary" text @click="dialog2 = false">Close</v-btn>
<v-btn color="primary" text @click="deleteItem(item)">Verwijderen</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
并使用方法脚本:
deleteItem(item) {
const index = this.companies.indexOf(item);
this.companies.splice(index, 1);
this.dialog2 = false;
console.log("Delete success");
},
我添加了控制台日志来查看按钮是否真的做了什么。当我现在按下删除图标时,我确实得到了对话。当我按“关闭”时,一切都很好。当我按删除时,我在控制台中收到消息“删除成功”,但该行没有删除。当我再次按下删除按钮时,页面崩溃....有什么想法吗?
解决方案
问题是有多个v-dialog
绑定到的实例,dialog2
因为它位于重复的插槽内。这与该工作的单个实例不同window.confirm
。因此,当您尝试deleteItem(item)
删除的项目始终是数组中的最后一个。
将v-dialog
对话框放在 之外v-data-table
,并跟踪itemToDelete
(与编辑工作方式相同)。使用一种方法来切换对话框并记住该项目...
showDeleteDialog(item) {
this.itemToDelete = item
this.dialogDelete = !this.dialogDelete
},
deleteItem() {
console.log('deleteItem', this.itemToDelete)
const index = this.items.indexOf(this.itemToDelete)
this.items.splice(index, 1)
this.dialogDelete = false
},
那么模板是...
<v-data-table>
<template v-slot:item.actions="{ item }">
<div class="text-truncate">
<v-icon
small
class="mr-2"
@click="editItem(item)"
>
mdi-pencil
</v-icon>
<v-icon
small
@click="showDeleteDialog(item)"
>
mdi-delete
</v-icon>
</div>
</template>
</v-data-table>
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title>Delete</v-card-title>
<v-card-text>Weet je zeker dat je `{{itemToDelete.Name}}` wenst te verwijderen?</v-card-text>
<v-card-actions>
<v-btn color="primary" text @click="dialogDelete = false">Close</v-btn>
<v-btn color="primary" text @click="deleteItem()">Delete</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
推荐阅读
- sql-server - SQL Server:清理旧数据需要太长时间
- android - 如何在成功的房间迁移时触发某些功能?
- c++11 - 枚举类意外
- python - 无法使用我的 SAM 应用程序访问 DynamoDB
- c++ - OpenCV 手动构建。没有这样的文件或目录#include "generated_16.i"
- validation - 验证 Knime 文件阅读器
- java - 使用 PdfMerger iText7 将 PdfDocument 转换为字节 []
- html - 如何在页眉中的图像旁边添加文本
- python-3.x - 如何根据 Excel Dataframe 中的内容突出显示行?
- html - 如何使用 shell 脚本在标签后添加 html 代码?