AlpineJS with Livewire Pagination x-show stays open

Here is a simplified version of what I have

@foreach($shows as $show)
	<div x-data="{ open: false }">
		<li x-on:click="open = !open">CONTENT</li>
		<div x-show="open">CONTENT</div>
	</div>
@endif

This works fine and clicking on the <li> opens and closes the inner content <div>.

My issue is that I'm using pagination and when you click on the pagination links to go to the next or previous page, the <div> stays open for a totally new entry on the next or previous page in the same index in the @foreach loop. i.e. If the 3rd item on the page was open before clicking on the pagination link, the 3rd item is also open on the page even though it is a totally different item on the new page.

Any way to make sure all these are closed when you go to the new page?

rubendn

3 years ago

Level 6

I've found a solution that works.

I've added @click.outside="open = false" to the <div> as such:

@foreach($shows as $show)
	<div x-data="{ open: false }">
		<li x-on:click="open = !open">CONTENT</li>
		<div x-show="open" @click.outside="open = false">CONTENT</div>
	</div>
@endif

Now when you click on the pagination, it closes the <div> before going to the next page.

If there is a better way to accomplish this, please let me know. Thanks.

Please or to participate in this conversation.