En el anterior artículo, vimos como crear la opción de eliminar registro desde el listado con Vue 3; pero, la eliminación es directa y no presenta los típicos diálogos de confirmación para evitar eliminar un registro por error.

Modal de confirmación en Oruga UI

En Oruga UI tenemos un componente llamado modal, que es como un lienzo vacío listo para que coloquemos todo el contenido que queramos colocar; para el caso de un diálogo de confirmación, sería un texto para eliminar y los botones de acciones:

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>

Desde el listado, lo único que hacemos es llamar al modal mediante una propiedad booleana:

• true, para mostrar el modal
• false, para ocultar el modal

En la tabla de Oruga UI, ahora activamos el modal y establecemos el row del elemento que queremos eliminar; ya que, al tener un proceso de por medio, no se puede accionar directamente la eliminación:

<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>

La propiedad en cuestión:

data() {
    return {
      //***
      confirmDeleteActive: false,
      deletePostRow: "",
    };

 y la función de eliminar que ahora elimina por el índice del registro:

deletePost() {
      this.confirmDeleteActive = false;
      this.posts.data.splice(this.deletePostRow.index, 1);
      this.$axios.delete("/api/post/" + this.deletePostRow.row.id);
    },

Recuerda que el row de la tabla en Oruga UI tiene mucha información como el índice de la tabla, además del ID que es un campo que puedes personalizar para indicar por ejemplo la PK del registro con el cual interactuar.