wire:confirm

Antes de realizar acciones peligrosas en Livewire, es posible que desee proporcionar a sus usuarios algún tipo de confirmación visual.

Livewire hace que esto sea fácil de hacer añadiendo wire:confirm además de cualquier acción (wire:click, wire:submit, etc.).

Este es un ejemplo de cómo añadir un diálogo de confirmación a un botón “Borrar mensaje”:

<button
    type="button"
    wire:click="delete"
    wire:confirm="¿Seguro que quieres borrar este post?">
    Borrar Post
</button>

Cuando un usuario pulsa “Borrar mensaje”, Livewire activa un diálogo de confirmación (la alerta de confirmación por defecto del navegador). Si el usuario pulsa escape o cancela, la acción no se realizará. Si pulsa “OK”, la acción se completará.

Preguntar a los usuarios

Para acciones aún más peligrosas, como eliminar la cuenta de un usuario por completo, puede que desee presentarles un mensaje de confirmación en el que tendrían que escribir una cadena específica de caracteres para confirmar la acción.

Livewire proporciona un útil modificador .prompt, que cuando se aplica a wire:confirm, preguntará al usuario por la entrada y sólo confirmará la acción si la entrada coincide (distinguiendo mayúsculas de minúsculas) con la cadena proporcionada (designada por un carácter ”|” (pipa) al final del valor de wire:confirm):

Traducción realizada con la versión gratuita del traductor DeepL.com

<button
    type="button"
    wire:click="delete"
    wire:confirm="¿Está seguro?\n\n Escriba DELETE para confirmar.">
    Borrar Cuenta
</button>

Cuando un usuario pulsa “Eliminar cuenta”, la acción sólo se llevará a cabo si se introduce “DELETE” en el prompt, de lo contrario, la acción se cancelará.