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>
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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!
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>
Please or to participate in this conversation.