<html><head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"></head><body> <div id="app"> <v-app> <v-main> <v-container> <h3>Vuetify Dialog to Confirm Delete Example</h3> <v-btn color="red" @click="showDeleteDialog">Delete Item</v-btn> <v-dialog v-model="dialog" max-width="400"> <v-card> <v-card-title class="headline">Confirm Delete</v-card-title> <v-card-text> Are you sure you want to delete this item? </v-card-text> <v-card-actions> <v-spacer></v-spacer> <v-btn color="success" @click="confirmDelete">Yes</v-btn> <v-btn color="warning" @click="cancelDelete">No</v-btn> </v-card-actions> </v-card> </v-dialog> </v-container> </v-main> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <script> new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { dialog: false, // Controls the visibility of the dialog }; }, methods: { showDeleteDialog() { this.dialog = true; }, confirmDelete() { // Handle the delete action here // You can emit an event or call a method to perform the delete alert('Successfully Deleted') this.dialog = false; // Close the dialog }, cancelDelete() { this.dialog = false; // Close the dialog without deleting }, }, }) </script></body></html>