I'd be happy to post some or all of my code, but for starters, here is the upshot. I have a Livewire view with Livewire components that are paginated. These items may also be filtered. However, any time I do any one of the following:
All Alpine JS on the page breaks. Anything that is hidden via x-cloak
becomes hidden, and anything that is hidden using x-show
is visible. No click events, no store, nothing.
What I've tried:
And nothing. No matter what, the result is more or less the same. Alpine just does not work after livewire activity. One thing that is very interesting though is that after each request, the Alpine:init function fires on the outer component, but that's it. I've tried turning it off to see whether that was the problem, but no luck.
Anything that can shed some light on this situation would be appreciated deeply.
Okay - I've solved it. The solution was breathtakingly simple, and I have only abstract guesses as to why it worked.
My code was something like this:
<div>
@foreach($mediaItems as $item)
<livewire:mediaItem :media="$item" key="mediaItem-{{$item}}"/>
@endforeach
</div>
And the problem was that the media item would lose javascript interactivity after the first pagination or refresh, etc. For whatever reason, modifying it to the following fixed it instantly.
<div x-data>
@foreach($mediaItems as $item)
<livewire:mediaItem :media="$item" key="mediaItem-{{$item}}"/>
@endforeach
</div>
And that was it. I had to add an x-data on the immediate wrapping element in order for interactivity to remain. Even though the wrapping element was already inheriting x-data
from it's parent, I needed to explicitly add it here.
This cost me a ton of time, so if this solution helps anyone else, I'm glad to be of service.