In the previous article, we saw how to create the option to delete record from the list with Vue 3; but, the deletion is direct and does not present the typical confirmation dialogs to avoid deleting a record by mistake.
Confirmation modal in Oruga UI
In Oruga UI we have a component called modal, which is like an empty canvas ready for us to place all the content we want to place; in the case of a confirmation dialog, it would be a text to delete and the action buttons:
resources\js\vue\componets\List.vue
<o-modal v-model:active="confirmDeleteActive">
<div class="p-4">
<p>¿Seguro que quieres eliminar el registro seleccionado?</p>
</div>
<div class="flex flex-row-reverse gap-2 bg-gray-100 p-3">
<o-button variant="danger" @click="deletePost()">Eliminar</o-button>
<o-button @click="confirmDeleteActive = false">Cancelar</o-button>
</div>
</o-modal> From the listing, all we do is call the modal via a boolean property:
- true, to display the modal
- false, to hide the modal
In the Oruga UI table, we now activate the modal and set the row of the element we want to remove; since, having a process involved, the deletion cannot be triggered directly:
<o-table-column field="slug" label="Acciones" v-slot="p">
<router-link
class="mr-3"
:to="{ name: 'save', params: { slug: p.row.slug } }"
>Editar</router-link
>
<o-button
iconLeft="delete"
rounded
size="small"
variant="danger"
@click="
deletePostRow = p;
confirmDeleteActive = true;
"
>Eliminar</o-button
>
</o-table-column>
</o-table>The property in question:
data() {
return {
//***
confirmDeleteActive: false,
deletePostRow: "",
};And the delete function which now deletes by the index of the record:
deletePost() {
this.confirmDeleteActive = false;
this.posts.data.splice(this.deletePostRow.index, 1);
this.$axios.delete("/api/post/" + this.deletePostRow.row.id);
},Remember that the table row in Caterpillar UI has a lot of information such as the table index, in addition to the ID, which is a field that you can customize to indicate, for example, the PK of the record with which to interact.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter