Communicating with AlpineJs

#1

Hi,

I’m currently in a situation where I want the user to add something to a list by selecting what they want to add and then a modal pops up with a list of lists. They can then select a list to add the item to that list (sorry if that was confusing).

So far I’ve got the modal opening up with AlpineJS and the modal itself is a Livewire component. The user can select a list and everything works as it should (things are stored in the database) but I’m struggling to figure out how to close the modal window on success. Additionally I’d like the modal to stay open on an error (if the list already contains the item).

How do I communicate between Livewire and AlpineJs?

Thanks.

#2

Have you taken a look at this screencast?

#3

I have, but as far as I could see there’s nothing Alpine specific. Can I not listen for a custom Livewire event on the Alpine element (similar to just going @click=“do something”)? New to both tools so sorry If I’m being an idiot.

1 Like
#4

Okay I played around with it some more and I think I figured it out.

I can do @click=“window.livewire.on(‘customEventFromLivewireComponent’, () => { data = false })”