I’m working on a Laravel 10 project using Livewire 3, where I’m building a booking management system. In this system, users can filter bookings by various statuses using a multiple select dropdown or a series of checkboxes. However, I encountered the following error while trying to bind the checkboxes to an array in my Livewire component:
Context:
Objective:
The goal is to allow users to filter bookings by their statuses, such as “Open,” “Closed,” “In Progress,” etc. Users should be able to select multiple statuses to filter the results. This is implemented using checkboxes within a dropdown-like structure that is toggled by a button.
Property [$selectedBookingStatuses.0] not found on component: [test-bookings-list]
TestBookingsList.php
<?php
namespace AppLivewire;
use LivewireComponent;
use LivewireWithPagination;
use AppModelsBookingModel;
use AppModelsUser;
use AppModelsJSVillas;
use IlluminateSupportFacadesSession;
use IlluminateSupportFacadesLog;
class TestBookingsList extends Component
{
use WithPagination;
public $start_date;
public $end_date;
public $booked_by;
public $villa_id;
public $search_query;
public $selectedPaymentStatuses = [];
public $selectedBookingStatuses = [];
public $searchTerm = '';
public $date_type;
public $booking_division = '';
public $users;
public $villas;
public function mount()
{
// Initializing properties from session or default values
$this->start_date = session('testing_start_date');
$this->end_date = session('testing_end_date');
$this->villa_id = session('testing_villa_id');
$this->booked_by = session('testing_booked_by');
$this->searchTerm = session('testing_searchTerm');
$this->selectedPaymentStatuses = session('testing_selectedPaymentStatuses', []);
$this->selectedBookingStatuses = session('testing_selectedBookingStatuses', []);
$this->date_type = session('testing_date_type');
$this->booking_division = session('testing_booking_division');
}
public function updated($propertyName)
{
// Logging and updating session
Log::debug("Updated Property: $propertyName", ['value' => $this->$propertyName]);
session(['testing_' . $propertyName => $this->$propertyName]);
$this->resetPage();
}
public function render()
{
// Query logic based on filters
$query = BookingModel::where('status', 0)->with(['villa', 'user'])->orderBy('id', 'desc');
if ($this->date_type == "range") {
if ($this->start_date) {
$query->where('start_date', '>=', $this->start_date);
}
if ($this->end_date) {
$query->where('end_date', '<=', $this->end_date);
}
} else {
if ($this->start_date) {
$query->where('start_date', $this->start_date);
}
if ($this->end_date) {
$query->where('end_date', $this->end_date);
}
}
if ($this->booking_division) {
$query->where('booking_division', $this->booking_division);
}
if ($this->booked_by) {
$query->where('booked_by', $this->booked_by);
}
if ($this->searchTerm) {
if (is_numeric($this->searchTerm)) {
$query->where(function ($q) {
$q->where('id', $this->searchTerm)
->orWhere('mobile_no', 'like', '%' . $this->searchTerm . '%')
->orWhere('id', 'like', '%' . $this->searchTerm . '%');
});
// Prioritize exact matches for numeric search terms
$query->orderByRaw("FIELD(id, ?) DESC", [$this->searchTerm]);
} else {
$query->where('booking_name', 'like', '%' . $this->searchTerm . '%');
}
}
if ($this->villa_id) {
$query->where('villa_id', $this->villa_id);
}
if (!empty($this->selectedPaymentStatuses)) {
$query->whereIn('payment_status_text', $this->selectedPaymentStatuses);
}
if (!empty($this->selectedBookingStatuses)) {
$query->whereIn('booking_status_text', $this->selectedBookingStatuses);
}
$bookings = $query->paginate(20);
return view('livewire.test-bookings-list', [
'bookings' => $bookings,
'users' => User::whereIn('role', [1, 2])->orderBy('name', 'ASC')->pluck('name', 'id'),
'villas' => JSVillas::orderBy('name', 'ASC')->pluck('name', 'id'),
]);
}
}
resources/views/livewire/test-bookings-list.blade.php
<div class="mb-4">
<!-- Booking Status -->
<label class="block text-sm font-medium mb-1" for="booking_status">Status</label>
<div class="relative inline-flex" x-data="{ open: false }">
<button id="booking_status" class="btn w-60 bg-white dark:bg-slate-800 border-slate-200 hover:border-slate-300 dark:border-slate-700 dark:hover:border-slate-600 text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300" aria-haspopup="true" @click.prevent="open = !open" :aria-expanded="open">
<span class="sr-only">Booking Status</span>
<span class="ml-2">Booking Status</span>
</button>
<div class="origin-top-right z-10 absolute top-full left-0 min-w-56 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 pt-1.5 rounded shadow-lg overflow-hidden mt-1" @click.outside="open = false" @keydown.escape.window="open = false" x-show="open" x-transition:enter="transition ease-out duration-200 transform" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-out duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-cloak>
<ul class="mb-4">
<li class="py-1 px-3">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox" wire:model.live="selectedBookingStatuses" value="Open" />
<span class="text-sm font-medium ml-2">Open</span>
</label>
</li>
<li class="py-1 px-3">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox" wire:model.live="selectedBookingStatuses" value="Closed" />
<span class="text-sm font-medium ml-2">Closed</span>
</label>
</li>
<li class="py-1 px-3">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox" wire:model.live="selectedBookingStatuses" value="In Progress" />
<span class="text-sm font-medium ml-2">In Progress</span>
</label>
</li>
<li class="py-1 px-3">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox" wire:model.live="selectedBookingStatuses" value="Menu Done" />
<span class="text-sm font-medium ml-2">Menu Done</span>
</label>
</li>
<li class="py-1 px-3">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox" wire:model.live="selectedBookingStatuses" value="No Food" />
<span class="text-sm font-medium ml-2">No Food</span>
</label>
</li>
<li class="py-1 px-3">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox" wire:model.live="selectedBookingStatuses" value="Accounts Pending" />
<span class="text-sm font-medium ml-2">Accounts Pending</span>
</label>
</li>
<li class="py-1 px-3">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox" wire:model.live="selectedBookingStatuses" value="Cancelled" />
<span class="text-sm font-medium ml-2">Cancelled</span>
</label>
</li>
</ul>
</div>
</div>
<!-- End -->
</div>
Problem:
The error occurs because Livewire is attempting to bind a checkbox to a specific index of the selectedBookingStatuses array (e.g., selectedBookingStatuses.0), but this index does not exist or is not initialized correctly.