使用Livewire与Alpine x-model时数组出现重复值问题

在将Alpine的x-model与Livewire配合使用时，勾选复选框会向Alpine数组中添加重复值。

组件类代码 #

protected $dueCommissions;

public function loadDueReward()
{
    // 此处为获取 $this->dueCommissions 的分页查询逻辑
}
public function render()
{
    // 由于Livewire处理分页数据的限制，在此处传递dueCommissions
    return view('reward::livewire.due-reward', [
        'dueCommissions' => $this->dueCommissions
    ]);
}

视图代码 #

<div class="main-content" wire:init='loadDueReward' wire:target='loadDueReward;gotoPage' x-data="{
    selectedUsers: []
}">
  @foreach ($dueCommissions ?? [] as $dueCommission)
    <tr wire:key='due-user-{{ $dueCommission->id }}'>
      <td class="table-cell-first">
        <input type="checkbox" class="form-checkbox" name="user" value="{{ $dueCommission->user_id }}" x-model="selectedUsers">
      </td>
    </tr>
  @endforeach
</div>

点击复选框时，Alpine的selectedUsers数组会出现重复值：

• Livewire版本: "livewire/livewire": "^2.10"
• Laravel版本: "laravel/framework": "^9.0"
• Alpine.js版本: alpinejs@3.8.1

该问题核心是Livewire的DOM更新机制与Alpine状态管理冲突：Livewire重新渲染组件（如分页、数据加载完成）时会生成新DOM，Alpine的x-model会重复同步复选框状态到数组，导致重复值。以下是三种解决方式：

方法1：手动管理Alpine数组，避免自动重复添加 #

替换x-model为手动点击事件，自行控制数组的增删逻辑：

<input type="checkbox" class="form-checkbox" name="user" 
       value="{{ $dueCommission->user_id }}" 
       @click="
           let userId = '{{ $dueCommission->user_id }}';
           let index = selectedUsers.indexOf(userId);
           if (index !== -1) {
               selectedUsers.splice(index, 1);
           } else {
               if (!selectedUsers.includes(userId)) {
                   selectedUsers.push(userId);
               }
           }
       "
       :checked="selectedUsers.includes('{{ $dueCommission->user_id }}')">

方法2：用wire:ignore禁止Livewire更新Alpine绑定区域 #

给包含Alpine状态的容器添加wire:ignore，阻止Livewire重新渲染该区域：

<div class="main-content" wire:init='loadDueReward' wire:target='loadDueReward;gotoPage' x-data="{
    selectedUsers: []
}" wire:ignore>
  @foreach ($dueCommissions ?? [] as $dueCommission)
    <tr wire:key='due-user-{{ $dueCommission->id }}'>
      <td class="table-cell-first">
        <input type="checkbox" class="form-checkbox" name="user" value="{{ $dueCommission->user_id }}" x-model="selectedUsers">
      </td>
    </tr>
  @endforeach
</div>

注意：该方式会使区域内的Livewire功能失效（如分页后的数据更新），需根据业务场景使用。

方法3：将选中状态同步到Livewire组件属性 #

让Livewire统一管理选中状态，从根源避免状态冲突：

1. 在组件类中添加属性：

public $selectedUsers = [];

2. 修改视图，使用Livewire的wire:model绑定：

<div class="main-content" wire:init='loadDueReward' wire:target='loadDueReward;gotoPage'>
  @foreach ($dueCommissions ?? [] as $dueCommission)
    <tr wire:key='due-user-{{ $dueCommission->id }}'>
      <td class="table-cell-first">
        <input type="checkbox" class="form-checkbox" name="user" 
               value="{{ $dueCommission->user_id }}" 
               wire:model="selectedUsers">
      </td>
    </tr>
  @endforeach
</div>

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