Намутил подтверждение удаления

resources/views/Wishlist/Wishlist.vue

@@ -15,6 +15,8 @@ export default {
         fetching: true,
         dialogCreate: ref(false),
         dialogEdit: ref(false),
+        dialogDelete: ref(false),
+        wishToDelete: ref(0),
         wishToEditId: ref(0),
         wishlistLink: '',
         snackbar: false
@@ -43,6 +45,7 @@ export default {
         removeWish(id){
             this.fetching = true;
             this.wishStore.remove(id, this.userStore.token).then(()=>{
+                this.dialogDelete = false;
                 this.wishStore.getUserWishes(this.userStore.user['id']).then((wishes)=>{
                     this.wishesList = wishes;
                     this.fetching = false;
@@ -53,6 +56,10 @@ export default {
             this.wishToEditId = id;
             this.dialogEdit = true;
         },
+        deleteWish(id){
+            this.wishToDelete = id;
+            this.dialogDelete = true;
+        },
         getWishToEditId(){
             return this.wishToEditId;
         },
@@ -68,9 +75,9 @@ export default {
     <div class="d-flex flex-column">
         <v-skeleton-loader color="grey-darken-4" type="table" v-if="fetching"></v-skeleton-loader>
         <div v-if="!fetching" class="d-flex justify-center align-center w-100 pt-5">
-            <v-text-field 
+            <v-text-field
-                class="w-33" 
+                class="w-33"
-                append-inner-icon="mdi-content-copy" 
+                append-inner-icon="mdi-content-copy"
                 @click:append-inner="copyLink"
                 readonly
             >
@@ -94,7 +101,7 @@ export default {
                     <td>{{ wish['price'] }}</td>
                     <td><a target="_blank" :href="wish['url']">{{ wish['url'] }}</a></td>
                     <td><v-icon @click="editWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-pencil"></v-icon></td>
-                    <td><v-icon @click="removeWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-trash-can"></v-icon></td>
+                    <td><v-icon @click="deleteWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-trash-can"></v-icon></td>
                 </tr>
                 <tr class="text-center">
                     <td colspan="5"><v-btn @click="dialogCreate = true" color="#212022" elevation="0" block><v-icon class="cursor-pointer" icon="mdi-plus-thick"></v-icon></v-btn></td>
@@ -106,6 +113,22 @@ export default {
             <v-dialog v-model="dialogEdit" class="w-66">
                 <EditWish :dialogEdit="dialogEditClose" :updateFrontWishes="updateFrontWishes" :wish_id="wishToEditId"/>
             </v-dialog>
+            <v-dialog v-model="dialogDelete" :class="isWide ? 'w-33' : 'w-100'">
+                <v-card class="card-bg">
+                    <v-card-title class="d-flex justify-space-between">
+                        <span>Удалить запись?</span>
+                        <span>
+                            <v-icon @click="dialogDelete = false" class="cursor-pointer" color="white" icon="mdi-close-thick"></v-icon>
+                        </span>
+                    </v-card-title>
+                    <v-card-text>
+                        <div class="d-flex justify-center">
+                            <v-btn class="ma-3" @click="removeWish(wishToDelete)">Да</v-btn>
+                            <v-btn class="ma-3" @click="dialogDelete = false">Нет</v-btn>
+                        </div>
+                    </v-card-text>
+                </v-card>
+            </v-dialog>
         </v-table>
         <v-table v-if="!fetching && !isWide" class="card-bg w-100 h-auto mt-5 pa-3">
             <thead>
@@ -121,7 +144,7 @@ export default {
                     <td><a target="_blank" :href="wish['url']">{{ wish['name'] }}</a></td>
                     <td>{{ wish['price'] }}</td>
                     <td><v-icon @click="editWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-pencil"></v-icon></td>
-                    <td><v-icon @click="removeWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-trash-can"></v-icon></td>
+                    <td><v-icon @click="deleteWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-trash-can"></v-icon></td>
                 </tr>
                 <tr class="text-center">
                     <td colspan="5"><v-btn @click="dialogCreate = true" color="#212022" elevation="0" block><v-icon class="cursor-pointer" icon="mdi-plus-thick"></v-icon></v-btn></td>
@@ -133,6 +156,22 @@ export default {
             <v-dialog v-model="dialogEdit" :class="isWide ? 'w-66' : 'w-100'">
                 <EditWish :dialogEdit="dialogEditClose" :updateFrontWishes="updateFrontWishes" :wish_id="wishToEditId"/>
             </v-dialog>
+            <v-dialog v-model="dialogDelete" :class="isWide ? 'w-66' : 'w-100'">
+                <v-card class="card-bg">
+                    <v-card-title class="d-flex justify-space-between">
+                        <span>Удалить запись?</span>
+                        <span>
+                            <v-icon @click="dialogDelete = false" class="cursor-pointer" color="white" icon="mdi-close-thick"></v-icon>
+                        </span>
+                    </v-card-title>
+                    <v-card-text>
+                        <div class="d-flex justify-center">
+                            <v-btn class="ma-3" @click="removeWish(wishToDelete)">Да</v-btn>
+                            <v-btn class="ma-3" @click="dialogDelete = false">Нет</v-btn>
+                        </div>
+                    </v-card-text>
+                </v-card>
+            </v-dialog>
         </v-table>
     </div>
 </template>