Laravel 10 + Livewire 3项目中绑定复选框到数组时出现[$selectedBookingStatuses.0]属性未找到错误

我帮你排查这个问题，这个错误通常是因为Livewire组件的数组属性声明或者视图绑定方式不对导致的，咱们一步步来解决：

错误原因分析 #

出现Property [$selectedBookingStatuses.0] not found这个提示，大概率是你在视图里错误地给wire:model加了数组索引（比如wire:model="selectedBookingStatuses.0"），或者组件里没有正确声明并初始化数组属性。Livewire处理数组绑定的时候，不需要手动指定索引，它会自动管理数组的元素添加和移除。

解决方案步骤 #

1. 正确声明组件数组属性 #

首先打开你的TestBookingsList.php组件类，确保$selectedBookingStatuses是公开的数组类型，并且初始化为空数组：

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use App\Models\BookingModel;
use App\Models\User;
use App\Models\JSVillas;

class TestBookingsList extends Component
{
    use WithPagination;

    // 关键：公开数组属性并初始化为空数组
    public array $selectedBookingStatuses = [];

    public function render()
    {
        // 基于选中的状态过滤预订数据
        $bookingsQuery = BookingModel::query();

        // 只有当选中状态不为空时才添加过滤条件
        if (!empty($this->selectedBookingStatuses)) {
            $bookingsQuery->whereIn('status', $this->selectedBookingStatuses);
        }

        return view('livewire.test-bookings-list', [
            'bookings' => $bookingsQuery->paginate(10),
        ]);
    }
}

2. 修正视图中的复选框绑定 #

在对应的Blade视图文件里，直接把复选框的wire:model绑定到数组属性本身，不要加任何索引：

<!-- 下拉式复选框组示例 -->
<div class="dropdown mb-3">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        选择预订状态
    </button>
    <ul class="dropdown-menu p-2">
        <!-- 示例状态选项，根据你的实际状态值调整 -->
        <li class="mb-2">
            <label class="d-flex align-items-center gap-2">
                <input type="checkbox" wire:model="selectedBookingStatuses" value="Open">
                待处理
            </label>
        </li>
        <li class="mb-2">
            <label class="d-flex align-items-center gap-2">
                <input type="checkbox" wire:model="selectedBookingStatuses" value="Closed">
                已完成
            </label>
        </li>
        <li>
            <label class="d-flex align-items-center gap-2">
                <input type="checkbox" wire:model="selectedBookingStatuses" value="In Progress">
                进行中
            </label>
        </li>
    </ul>
</div>

<!-- 过滤后的预订列表 -->
<div class="booking-list">
    @foreach($bookings as $booking)
        <div class="card mb-2">
            <div class="card-body">
                <h6>预订编号: {{ $booking->id }}</h6>
                <p>状态: <span class="badge bg-primary">{{ $booking->status }}</span></p>
            </div>
        </div>
    @endforeach

    <!-- 分页组件 -->
    {{ $bookings->links() }}
</div>

3. 额外注意事项 #

• 确保属性是public的：Livewire只能绑定组件的公开属性，私有/受保护属性无法被视图绑定。
• 可选：添加验证规则（如果需要）
  如果你想限制选中的状态值，可以在组件里添加验证规则：

  protected $rules = [
      'selectedBookingStatuses' => 'array',
      'selectedBookingStatuses.*' => 'string|in:Open,Closed,In Progress', // 匹配你的实际状态值
  ];
  

这样调整后，应该就能解决这个属性未找到的错误，实现多选状态过滤预订的功能了。

备注：内容来源于stack exchange，提问作者Sayyed Hasan