Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ericknyoto's avatar

How to make alpineJs not open all modal from list of items using "dispatch"

Hi, My codes looks like this

Basically, I want to show edit user modal in a list of items, but to toggle the modal, I use Alpine js dispatch. How I avoid to open all edit user modal when I clicked on specific user.

For now, if I clicked on the edit button, the modal will show as many as users are on the list, if the lists have 10 users, then the modal will show 10 times.

index.blade.php -> this is a livewire view, So i have another livewire view inside a livewire view (<livewire:edit-user />)

@foreach ($users as $user)
<div>{{ $user-name}} </div>
<button @click=" isOpen = false $dispatch('show-edit-modal-with-data')>Edit</button>
<livewire:edit-user :user="$user" />
@endforeach

livewire\edit-user.blade.php

<div @show-edit-modal-data="isOpen = true>Inside this div are data from livewire EditUser class</div>

Did you think, my approach is imposible? I come to this because, I don't want to send ajax request to only show modal. I also notice that usually people told to use @entangle to toggle modal. Any help, appreciated. Thanks!

0 likes
3 replies
pom's avatar
pom
Best Answer
Level 21

Move your edit button inside the EditUser Livewire component.

<div x-data="{ open: false }">
    <button @click="open = ! open">Edit</button>

    <div x-show="open">
        Inside this div are data from livewire EditUser class
    </div>
</div>
1 like

Please or to participate in this conversation.