Livewire 多线：点击，第一个有效，其余不答案

【问题标题】：Livewire multiple wire:click, first one works, rest do notLivewire 多线：点击，第一个有效，其余不
【发布时间】：2021-02-25 06:34:52
【问题描述】：

我正在使用 livewire 组合一个 CRUD 应用程序，而我的问题是使用线：单击不同的按钮。我有一个创建模式出现，并且该模式中的 wire:click 工作正常。但是，主页上的编辑和删除按钮在单击时不会触发。

我可以让编辑按钮触发的唯一方法是，如果它是唯一带有线的按钮：单击页面。

这两个按钮位于每个组织的 @foreach 循环中。这个循环构建了表格

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

我怎样才能得到这些线：点击以触发表格中的每一行。

我的应用布局中确实有@livewireScripts

【问题讨论】：

标签： laravel-livewire

【解决方案1】：

为了不混淆 Livewire，您应该在循环中的元素上使用 wire:key。这也意味着您应该将 HTML 包装在一个父级 <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 使用复杂的 DOM 差异算法来智能地交换组件。因此，当您有循环时，请确保添加键并将它们包装在父容器中。

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

【讨论】：