ListComponent.vue: Diálogo de cofirmación al momento de Eliminar en Vue - 35

▶

Vamos a hacer otra operación interesante que sería definir un diálogo de confirmación al momento de realizar la operación de eliminar. Creo que es un poco obvio el por qué pero se debe a que por error el usuario le puede dar aquí eliminar ya sea directamente el botón por error o directamente el registro que no quiere eliminar así que es importante colocar un diálogo de confirmación para que evitar que pierda su trabajo obviamente así que para esto vamos a hacer la siguiente configuración aquí un punto importante vamos vamos a tener es un único modal por n registros lo que significa que fíjate que aquí tenemos un botón de eliminar por cada o una petición para eliminar se pudiera decir por cada registro es decir tenemos un equivalente de un a un pero en el caso del model va a ser un componente así como la tabla y tenemos que configurarlo y es por eso que es un poquito no complicada pero sí comparado con esto más fastidiosa la implementación entonces te la muestro pero ten eso presente.

Componente de Modal de Oruga UI

Tenemos solo un único modal aquí tenemos el componente de om modal que también aquí lo puedes ver en la documentación oficial:

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

Fíjate que también adicionalmente tenemos la variable que va a permitir mostrar o no el diálogo de confirmación, el llamado isActive.

Y junto con Tailwind, podemos darle esos pequeños detalles, así que, queda como:

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

En la tabla, colocamos una referencia al indice del elemento que queremos elimiar:

<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)
},

Y eso es todo, ya con esto, tenemos un esquema para poder eliminar un registro.