Laravel Livewire分页表格多选复选框状态异常修复问询

我用Laravel和Livewire构建了带每行复选框及“全选”选项的分页表格，当前功能可运行，但分页切换时出现异常：例如第1页显示1-6条记录，选中记录1、2后切换到第2页，第2页中原本未选中的第1、2行复选框却被自动勾选。如何修复该问题，确保分页后未选中的行复选框不会被自动勾选？

视图代码（原始） #

<div class="table-container">
    <table class="table">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" class="sales-checkbox" wire:model.live="selectAll"/>
                </th>
                <th>Número</th>
                <th>Cliente</th>
                <th>Creación</th>
                <th>Vencimiento</th>
                <th>Total</th>
                <th>Por Cobrar</th>
                <th>Estado</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            @foreach($invoices as $invoice)
                <tr>
                    <th class="whitespace-nowrap align-content-center align-items-center text-center">
                        @if($invoice->trashed())
                            -
                        @else
                        <input type="checkbox" class="sales-checkbox" wire:model.live="selected"
                               @if(in_array($invoice->id, $selected)) checked @endif
                               value="{{ $invoice->id }}"/>
                        @endif
                    </th>
                    <td class="whitespace-nowrap align-content-center align-items-center">{{ $invoice->invoice_number }}</td>
                    <td class="whitespace-nowrap align-content-center align-items-center">{{ $invoice->customer->name }}</td>
                    <td class="whitespace-nowrap align-content-center align-items-center">{{ $invoice->created_at->format('d/m/Y') }}</td>
                    <td class="whitespace-nowrap align-content-center align-items-center">{{ $invoice->expiration_date->format('d/m/Y') }}</td>
                    <td class="whitespace-nowrap align-content-center align-items-center">C$ {{ \Illuminate\Support\Number::format($invoice->total_amount) }}</td>
                    <td class="whitespace-nowrap align-content-center align-items-center">C$ {{ \Illuminate\Support\Number::format($invoice->total_amount - $invoice->payments->sum('amount_in_nio')) }}</td>
                    <td class="whitespace-nowrap align-content-center align-items-center">
                       @if($invoice->trashed())
                            <x-jemg-components.invoice-status-badges
                                type="danger"
                                text="Anulada">
                            </x-jemg-components.invoice-status-badges>
                        @else
                            <x-jemg-components.invoice-status-badges
                                type="{{ $invoice['status_labels']['type'] }}"
                                text="{{ $invoice['status_labels']['label'] }}">
                            </x-jemg-components.invoice-status-badges>
                        @endif
                    </td>
                    <td class="whitespace-nowrap align-content-center align-items-center">
                        <x-jemg-components.flat-actions
                            :show="route('admin.sales.show',$invoice)"
                            :export="route('admin.sales.export',$invoice)"
                            :model="$invoice"
                            :trashed="$invoice->trashed()"
                        />
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

组件类代码（原始） #

class SalesIndex extends Component
{
    use WithPagination;

    public $selected = [];
    public $selectAll = false;

    public function render()
    {
        $invoices = Invoice::query()
            ->with(['customer', 'user', 'subProducts', 'payments'])
            ->latest('id')
            ->withTrashed()
            ->paginate(50);

        return view('livewire.sales.sales-index', compact('invoices'));
    }

    public function updatedSelectAll($value)
    {
        if ($value) {
            $this->selected = Invoice::pluck('id')->map(fn ($id) => (string) $id)->toArray();
        } else {
            $this->selected = [];
        }
    }
}

问题根源 #

1. 手动checked属性与Livewire绑定冲突：视图中手动添加@if(in_array(...)) checked @endif，和Livewire的wire:model.live双向绑定重复控制复选框状态，导致状态判断混乱。
2. Livewire DOM复用机制：分页切换时，Livewire会复用之前的DOM元素，若未指定唯一标识，旧的选中状态会被错误继承到新页面的行上。
3. 全选逻辑未区分分页：原始全选会选中数据库所有记录，而非当前页，进一步加剧状态匹配错误。

修复步骤 #

1. 移除手动checked属性，完全依赖Livewire绑定 #

Livewire的wire:model会自动根据selected数组匹配复选框状态，手动添加checked属性会导致冲突。修改视图中的复选框代码：

<input type="checkbox" class="sales-checkbox" wire:model.live="selected" value="{{ $invoice->id }}"/>

2. 为循环元素添加唯一key，避免DOM复用 #

在@foreach的<tr>标签上添加唯一标识，让Livewire能准确区分不同行的DOM元素：

@foreach($invoices as $invoice)
    <tr :key="`invoice-${$invoice->id}`">
        <!-- 其他内容不变 -->
    </tr>
@endforeach

3. 优化全选逻辑（可选，按需调整） #

如果只需要选中当前页的记录，修改updatedSelectAll方法，避免选中所有数据库记录：

// 先在组件类中把$invoices声明为公共属性
public $invoices;

public function render()
{
    $this->invoices = Invoice::query()
        ->with(['customer', 'user', 'subProducts', 'payments'])
        ->latest('id')
        ->withTrashed()
        ->paginate(50);

    return view('livewire.sales.sales-index', ['invoices' => $this->invoices]);
}

public function updatedSelectAll($value)
{
    if ($value) {
        // 只收集当前分页数据的ID
        $this->selected = $this->invoices->pluck('id')->map(fn($id) => (string)$id)->toArray();
    } else {
        $this->selected = [];
    }
}

若确实需要选中所有记录，可保留原始全选逻辑，但必须确保移除手动checked属性。

修复后效果 #

分页切换时，新页面的复选框只会显示selected数组中包含的当前页记录ID，不会出现未选中行被自动勾选的情况，全选功能也会根据需求准确控制当前页或所有记录的选中状态。

内容的提问来源于stack exchange，提问作者Jarliev Pérez