使用对话框中的删除按钮删除 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

问题是有多个bound to实例v-dialogdialog2，因为它位于重复的槽内。这与单个实例的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>

演示