Un diálogo de confirmación no es más que una caja de diálogo que se muestra en el navegador para confirmar una acción que se realizará en una aplicación web. Por ejemplo, si un usuario hace clic en un botón que borra un registro en una tabla, se puede mostrar un cuadro de diálogo de confirmación que pregunte al usuario si está seguro de que desea borrar el registro. veamos como implementar uno en Livewire.
Laravel Livewire es genial, realizar operaciones que requieren de ambos lados, es decir, el cliente y el servidor siempre son pesadas ya que tenemos que crear rest apis, y conectar ambos entes, o desde vanilla JavaScript, enviar peticiones fetch, devolver json, evaluar respuesta, hacer cambios en el html... un verdadero lío y mucho trabajo para hacer actualizaciones; Livewire nos abstrae de todo esto empleando eventos y funciones, además de una estructura base para poder comunicar el cliente y servidor de una manera muy directa.
El problema radica que esta facilidad a veces nos trae inflexibilidad, y realizar operaciones sencillas como eliminar, quedan demasiadas sencillas y directas con livewire; generalmente tenemos en Livewire algo como:
<x-a-danger wire:click="delete({{ $p }})" href="#">
EliminarQue en la práctica si le pegamos un clic al elemento HTML que tiene definido dicho atributo ELIMINA DE UNO EL ELEMENTO, cosa que seguramente no vas a querer porque puede que nuestro usuario le dé un clic por error a esa opción; para las eliminaciones es buena práctica colocar un dialogo de confirmacion; asi que, para evitar eliminar registros con un solo clic, en el mismo elemento que contiene el wire:click, puedes colocarle un onclick de JavaScript con dicho diálogo de confirmación:
<x-a-danger onclick="confirm('¿Seguro que quieres eliminar?') || event.stopImmediatePropagation()" wire:click="delete({{ $p }})" href="#">
Eliminar
</x-a-danger>La clave aquí es el stopImmediatePropagation que detiene la programación del evento; livewire en su core emplea eventos en el cliente para llamar a eventos en el servidor, eventos de JavaScript que también podemos detener.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter