Livewire实时搜索异常求助：输入关键词需点击分页才生效

问题描述 #

使用Livewire开发实时搜索功能时，在搜索框输入关键词后，搜索结果不会立即更新，必须多次点击分页按钮才能显示匹配的结果。

后端代码（原代码） #

<?php

namespace App\Livewire;

use App\Models\mahasiswa;
use Livewire\Component;
use Livewire\WithPagination;

class Search extends Component
{
    public $search = "";

    use WithPagination;

    protected $paginationTheme = 'bootstrap';

    public function render()
    {
        $mahasiswa = mahasiswa::where('nama', 'like', '%' . $this->search . '%')->paginate(5);
        return view('livewire.search', [
            'mahasiswa' => $mahasiswa,
        ]);
    }

    public function updatingSearch()
    {
        $this->resetPage();
    }
}

视图代码（原代码） #

<div>
    <div class="my-3 p-3 bg-body rounded shadow-sm">
        <!-- FORM PENCARIAN -->
        <div class="pb-3">
            <input type="text" class="form-control me-2" name="search" wire:model.debounce.500ms="search" placeholder="Search" aria-label="Search"  id="liveSearchInput">
        </div>
        <!-- TOMBOL TAMBAH DATA -->
        <div class="pb-3">
            <a href='{{url('mahasiswa/create')}}' class="btn btn-primary">+ Tambah Data</a>
        </div>
        <table class="table table-striped">
            <thead>
                <tr >
                    <th class="col-md-1">No</th>
                    <th class="col-md-3">NIM</th>
                    <th class="col-md-4">Nama</th>
                    <th class="col-md-2">Jurusan</th>
                    <th class="col-md-2">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($mahasiswa as $item)
                <tr wire:key="item-{{ $item->id }}">
                    <td>{{$mahasiswa->firstItem() + $loop->index}}</td>
                    <td>{{$item->nim}}</td>
                    <td>{{$item->nama}}</td>
                    <td>{{$item->jurusan}}</td>
                    <td>
                        <a href='{{url('mahasiswa/'.$item->nim.'/edit')}}' class="btn btn-success btn-sm">Edit</a>
                        <form onsubmit="return confirm('Yakin menghapus data?')" class="d-inline" action="{{url('mahasiswa/'.$item->nim)}}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" name="submit" class="btn btn-danger btn-sm">Del</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        {{$mahasiswa->links()}}
    </div>
</div>

解决步骤 #

1. 修正模型类名大小写（符合PSR-4规范） #

Linux环境下PHP对类名大小写敏感，需确保模型引用与文件名一致：

• 将use App\Models\mahasiswa;改为use App\Models\Mahasiswa;
• 查询语句中mahasiswa::where(...)改为Mahasiswa::where(...)

2. 调整Trait的位置 #

将use WithPagination;移至类属性定义之前，确保Trait方法正确加载：

class Search extends Component
{
    use WithPagination;

    public $search = "";

    protected $paginationTheme = 'bootstrap';
    // ... 其余代码不变
}

3. 确认Livewire资源已正确加载 #

在包含该Livewire组件的父视图中，必须添加Livewire的样式和脚本：

@livewireStyles
<!-- 页面其他内容 -->
@livewireScripts

4. 验证分页链接的Livewire绑定 #

检查{{$mahasiswa->links()}}生成的分页按钮是否带有wire:click属性。如果未生成，可在AppServiceProvider的boot方法中手动指定Livewire分页视图：

use Illuminate\Pagination\Paginator;

public function boot()
{
    Paginator::defaultView('livewire::pagination.bootstrap');
}

5. 可选：调整搜索延迟 #

如果希望搜索更即时，可缩短wire:model.debounce的延迟时间，比如改为wire:model.debounce.300ms="search"；也可移除debounce（不推荐，会增加后端请求频率）。

修正后的后端代码 #

<?php

namespace App\Livewire;

use App\Models\Mahasiswa;
use Livewire\Component;
use Livewire\WithPagination;

class Search extends Component
{
    use WithPagination;

    public $search = "";

    protected $paginationTheme = 'bootstrap';

    public function render()
    {
        $mahasiswa = Mahasiswa::where('nama', 'like', '%' . $this->search . '%')->paginate(5);
        return view('livewire.search', [
            'mahasiswa' => $mahasiswa,
        ]);
    }

    public function updatingSearch()
    {
        $this->resetPage();
    }
}

内容的提问来源于stack exchange，提问作者NAUFAL_ ARZ