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

问题

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 perfectly. However the edit and delete buttons on the main page do not fire off when clicked.

The only way I can get the edit button to fire is if it is the only button with wire:click on the page.

These two buttons are inside a @foreach loop for each organization. This loop builds out the table

<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>

How can I get these wire:clicks to fire off for each row in the table.

I do have @livewireScripts on my app layout

回答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

回答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>

来源：https://stackoverflow.com/questions/64817742/livewire-multiple-wireclick-first-one-works-rest-do-not

标签

laravel-livewire