Confirmation modal to delete records from Vue 3 with Oruga UI

- Andrés Cruz

En español

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.

Andrés Cruz

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.