Livewire分页勾选下一页复选框跳转回前页选中同序号行如何解决

两个核心配置缺失导致Livewire的DOM识别和状态同步异常：

• 循环渲染的复选框没有添加唯一标识wire:key，Livewire默认按元素顺序做DOM diff，无法区分不同分页下的同位置复选框
• 组件没有保留分页页码状态，触发交互后重新渲染会回到默认的第一页

1. 调整后端组件类 #

首先在你的Livewire组件类中新增公共属性，配置状态同步：

class IndexTracker extends Component
{
    // 存储选中的ID数组
    public array $selected = [];
    // 存储当前页码，同步到URL查询参数
    public int $page = 1;

    // 配置需要同步到URL的属性
    protected $queryString = ['page'];

    // 原有render逻辑微调，paginate手动绑定当前page属性
    public function render()
    {
        $tracking_dates = Tracking::select(DB::raw('max(created_at) as created_at'))
            ->groupBy('tracking_number')
            ->get();
        $this->trackings = Tracking::query()
            ->when(Auth::user()->hasRole('user'), function($query){
                $query->whereHas('PurchaseRequest', function($sub_query) {
                    $sub_query->where('user_id', '=', Auth::id());
                });
            })
            ->whereIn('created_at', $tracking_dates)
            ->paginate(20, page: $this->page);

        return view('livewire.index-tracker', [
                'trackings' => $this->trackings,
                'trackingStatus' => TrackingStatus::all(),
            ]);
    }
}

2. 修改视图层复选框代码 #

给循环中的复选框添加唯一的wire:key属性，值用每条数据的唯一ID：

<input type="checkbox" value="{{$tracking->id}}" wire:model="selected" wire:key="tracking-{{$tracking->id}}">

如果需要跨分页保留选中状态，不需要额外修改其他逻辑，$selected数组会自动存储所有选中的ID，不会受分页切换影响。

修改完成后测试：

• 切换到第二页，勾选第3行复选框，页面不会跳回第一页，当前行复选框正常选中
• 切换回第一页，对应位置复选框不会被误选
• 多次切换分页，已经选中的复选框状态保持不变

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