Confirmation modal to delete records from Vue 3 with Oruga UI

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.