使用对话框中的删除按钮删除 Vuetify 数据表中的行

Question

我有一个数据表，每行都有一个编辑和删除图标。当使用下面的代码并按下删除图标时，我会弹出一个系统，并且该行会按照我想要的方式删除。太完美了。

        <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");
},

我已添加控制台日志以查看按钮是否确实执行了某些操作。 当我现在按下删除图标时，我确实得到了对话。当我按“关闭”时，一切都很好。 当我按删除时，我在控制台中收到消息“删除成功”，但该行没有删除。 当我再次按下删除按钮时，页面崩溃了....有什么想法吗？

Answer 1

问题在于有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>

Demo