Delete line in Vuetify data-table with delete button in dialog

Question

I have data-table with an edit and delete icon to each line. When using the code below and pressing the delete icon I get a system pop-up and the the line deletes the way I want it. So perfect.

        <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>

Methods script:

deleteItem(item) {
   const index = this.companies.indexOf(item);
   confirm("Are you sure you want to delete this item?") &&
   this.companies.splice(index, 1);
},

Now instead of the system pop-up I want to have a nice dialog. Like in https://codepen.io/anon/pen/pYzZPZ?editors=1010.

So I've made this code:

        <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>

And with Methods script:

    deleteItem(item) {
  const index = this.companies.indexOf(item);
  this.companies.splice(index, 1);
  this.dialog2 = false;
  console.log("Delete success");
},

I've added the console log to see if the button actually did something. When I press the delete icon now I do get the dialoge. When I press "close" everything is fine. When I press delete I get the message "Delete success" in console but the line is not deleting. When I press the delete button again the page crashes....Any ideas?

Answer 1

The problem is that there are multiple instances of v-dialog bound to dialog2 because it's inside a slot that repeats. This is different than the single instance of window.confirm that works. So, when you attempt to deleteItem(item) the item to delete is always the last in the array.

Put the v-dialog dialog outside the v-data-table, and keep track of the itemToDelete (this same way edit works). Use a method to toggle the dialog and remember the item...

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
},

Then the template is...

   <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