Laravel livewire : wire:click avec Javascript onclick confirm

Dans un composant Laravel Livewire, lorsque nous voulons effectuer une action quand on clic sur un bouton, nous pouvons utiliser l’attribut wire:click en indiquant la méthode à exécuter de la manière suivante :

<button wire:click="delete()" >Supprimer</button>

Pour une action telle que delete() qui va supprimer une donnée, nous pouvons demander une confirmation à l’utilisateur avant d'exécuter l'action en présentant une boîte de dialogue avec l'attribut onclick et la méthode Javascript confirm() :

<button wire:click="delete()" onclick="confirm('Vous confirmez la suppression ?')" >Supprimer</button>

La boite de dialogue suivante est affichée lorsqu'on clic sur le bouton :

Mais en cliquant sur l'option Annuler de la boite de dialogue, la méthode delete() du composant Livewire s’exécute tout de même.

Pour corriger ce comportement, nous pouvons appeler la méthode Javascript Event.stopImmediatePropagation() (Voir documentation) pour empêcher l'appel des autres évèments attachés au bouton quand l'utilisateur ne confirme pas l'action :

<button wire:click="delete()" onclick="confirm('Vous confirmez la suppression ?') || event.stopImmediatePropagation()" >Supprimer</button>

Notez l'utilisation de l'opérateur || ou « ou » entre les méthode JavaScript confirm() et event.stopImmediatePropagation().

Portez-vous bien ! 😎