Livewire multiple wire:click, first one works, rest do not

Question

I am putting together a CRUD app using livewire and my issue is with wire:click on the different buttons. I have a create modal come up and the wire:click in that modal works pe

Answer 1

To not confuse Livewire, you should use wire:key on elements in a loop. This also means that you should wrap you HTML in one parent <div>.

@foreach ($items as $org)
    <div wire:key="{{ $loop->index }}">
        <button class="btn btn-sm btn-success" wire:target="edit('{{$org->id}}')">Edit</button>
        <button class="btn btn-sm btn-danger" wire:click="delete({{$org->id}})">Delete</button>
    </div>
@endforeach

• https://laravel-livewire.com/docs/2.x/troubleshooting

Answer 2

Livewire uses a complex DOM diffing algorithm to intelligently swap components. So When you have loops make sure to add keys and wrap them in a parent container.

<div wire:key="{{$org->id}}">
        <button class="btn btn-sm btn-success" wire:target="edit('{{$org->id}}')">Edit</button>
        <button class="btn btn-sm btn-danger" wire:click="delete({{$org->id}})">Delete</button>
</div>