ListComponent.vue: Confirmation Dialog on Delete in Vue - 35

We're going to do another interesting operation which would be to define a confirmation dialog when performing the delete operation. I think it's a little obvious why but it's because by mistake the user can click here to delete either directly the button by mistake or directly the record that they don't want to delete so it's important to place a confirmation dialog to avoid losing their work obviously so for this we're going to do the following configuration here an important point we're going to have is a single modal for n records which means that notice that here we have a delete button for each or a request to delete you could say for each record that is to say we have an equivalent of one by one but in the case of the model it's going to be a component as well as the table and we have to configure it and that's why it's a little not complicated but compared to this more tedious the implementation so I'll show it to you but keep that in mind.

Oruga UI Modal Component

We have only one modal here we have the om modal component which you can also see here in the official documentation:

<o-modal v-model:active="isActive">
     ***
</o-modal>

Note that we also have the variable that will allow us to show or hide the confirmation dialog, called isActive.

And together with Tailwind, we can give it those little details, so it looks like this:

<o-modal v-model:active="confirmDeleteActive">
   <div class="m-4">
       <p class="mb-3">Are you sure you want to delete the selected record?</p>
       <div class="flex gap-2 flex-row-reverse">
           <o-button @click="confirmDeleteActive = false">Cancel</o-button>
           <o-button variant="danger" @click="remove">Delete</o-button>
       </div>
   </div>
</o-modal>

In the table, we place a reference to the index of the element we want to delete:

<o-table-column label="Actions" v-slot="m">
    <o-button variant="danger" size="small" @click="remove(m)">Delete</o-button>
</o-table-column>
***
remove(movie){
    axios.delete('http://code4movies.test/api/pelicula/' + movie.row.id)
        .then(res => res.data)
        .catch(error => error)
    this.movies.splice(movie.index,1)
},

And that's it, with this, we have a scheme to be able to delete a record.