Laravel Livewire搜索时复选框异常保持勾选问题

问题场景 #

我有4个用户，初始已选中第一个用户。搜索第二个用户时，列表正确显示该用户，但对应的复选框未点击却处于勾选状态。

原因分析 #

问题出在Livewire的DOM diffing机制上：Blade循环中的列表项使用了原生key属性，而非Livewire识别的wire:key。当搜索过滤用户列表时，Livewire会复用之前的DOM节点，导致原选中项的复选框状态被错误传递给新列表中的项。

修复步骤 #

• 将列表项的key属性替换为wire:key，并结合用户ID生成唯一值，让Livewire能准确跟踪每个列表项的状态。
• 确保Livewire组件中正确初始化selectedUsers为数组类型，避免绑定异常。

修改后的代码 #

<div class="flex justify-center items-center mt-2"
     x-data="{ query: '', isFocused: false, firstFocus: false }">
     <div class="bg-white border selectPeople p-2 rounded-lg">
         <div x-show="!(isFocused && query.length > 1)">
             <p class="text-sm text-gray-500 mt-2">Select all the people you would like in
                 your organisation
                 chart</p>
         </div>
         <div class="search-container flex items-center mt-2">
             <img class="search-icon h-4 w-auto" src="{{ asset('images/MagnifyingGlass.svg') }}"
                 alt="Search Icon">
             <input wire:model.live.debounce.500ms="searchPeople" type="text" x-model="query"
                 x-on:focus="isFocused = true; firstFocus = true;" x-on:blur="isFocused = false"
                 class="w-full bordermainBlue outline-none block border py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 rounded-lg placeholder:text-gray-500 sm:text-md sm:leading-6"
                 placeholder="Search">
         </div>
         <div class="searchBox flex justify-center flex-col items-center" x-show="!firstFocus">
             <img class="" src="{{ asset('images/Illustration.png') }}" alt="Search Icon">
             <p class="text-black text-base font-semibold">Start entering individuals’ names
             </p>
         </div>
         <!-- User list with checkboxes -->
         <ul class="mt-4 adddeduser space-y-6 border py-4"
             x-show="(isFocused && query.length > 1) || firstFocus">
             @foreach($users as $user)
                 <li class="flex justify-between" wire:key="user-{{ $user->id }}">
                     <div class="flex items-center gap-2 pl-4">
                         <div
                             class="border rounded-full w-10 h-10 text-white flex justify-center items-center text-center bg-cyan-500">
                             {{ strtoupper(substr($user->forename, 0, 1)) . strtoupper(substr($user->surname, 0, 1)) }}
                         </div>
                         <div class="space-y-1">
                             <span
                                 class="text-sm font-semibold block">{{ $user->forename . " " . $user->surname}}</span>
                             <span
                                 class="text-xs text-gray-500 block">{{ $user->role->title ?? ''}}</span>
                         </div>
                     </div>
                     <input type="checkbox" wire:model="selectedUsers" value="{{ $user->id }}"
                         class="form-checkbox h-4 w-4 mr-4 checkbx transition duration-150 ease-in-out">
                 </li>
             @endforeach
         </ul>
         <div class="flex justify-end mt-4">
             <!-- Submit the form when the button is clicked -->
             <button type="submit" class="p-2 rounded-lg">Continue</button>
         </div>
     </div>
</div>

额外注意 #

在Livewire组件类中，必须初始化public $selectedUsers = [];，保证绑定的是数组类型，避免状态混乱。

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