Livewire切换分页后wire:click失效问题求助

问题原因 #

这个问题的核心是Livewire通过AJAX加载分页内容后，新渲染的DOM元素没有正确绑定wire:click事件，通常由分页链接逻辑错误、DOM标识缺失或标签交互冲突导致。

解决步骤 #

1. 修正分页链接渲染方式 #

将视图中用{!! !!}渲染分页链接的代码，替换为Livewire推荐的写法：

{{ $suppliers->links() }}

{!! !!}会绕过Blade的安全处理，可能导致Livewire生成的wire:click分页指令丢失，改用{{ }}可以确保分页链接正确绑定Livewire的AJAX分页逻辑。

2. 替换标签为 #

<a href="#">的默认跳转行为可能干扰Livewire事件触发，换成标签更符合交互逻辑：

@foreach ($suppliers as $supplier)
    <button wire:click="showAutoModal()" class="hover-scale me-2 btn btn-link">Auto</button>
@endforeach

3. 添加组件根容器与唯一标识 #

在livewire/suppliers.blade.php最外层添加带唯一key的根容器，确保Livewire能正确跟踪DOM更新：

<div wire:key="suppliers-{{ $this->id }}">
    @foreach ($suppliers as $supplier)
        <button wire:click="showAutoModal()" class="hover-scale me-2 btn btn-link">Auto</button>
    @endforeach
    <div class="d-flex">
        <div class="ms-auto mt-2">
            {{ $suppliers->links() }}
        </div>
    </div>
</div>

4. 清除缓存（必要时） #

如果上述步骤无效，执行以下命令清除Livewire和Blade缓存：

php artisan livewire:clear
php artisan view:clear

验证方法 #

1. 点击分页链接，观察浏览器控制台是否有Livewire的AJAX请求（而非整页刷新）
2. 切换到第二页后，点击"Auto"按钮，检查是否触发showAutoModal()方法（是否输出dd(555)）

内容的提问来源于stack exchange，提问作者Sezz Fess