You should add a key to each option.
<option value="{{ $key }}" wire:key="{{ 'reason-'.$key }}">{{ $reason }}</option>
But it's probably not the reason why you get the error.
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hi,
I've made a fairly basic component using Livewire 3. It collects a status [True|False] and a reason chosen from a select menu.
My component contains a line $this->validate() which seems to throw the error
Undefined array key 1
I have tried the mix of adding an public rules section, but currently sticking with an array inside of the $this->validate() function.
I did try this
My component looks as so :
<?php
namespace App\Livewire\Orders;
use Livewire\Component;
use Livewire\Attributes\Validate;
use App\Enums\OrderCancellationReason;
class NotFitted extends Component
{
public Object $order;
public Object $product;
// Form Vars
public $status = false;
public $reason = '';
public function saveData()
{
$this->validate(
[
'status' => 'accepted',
'reason' => 'required'
]
);
dd("VALID!");
// Send To Tyre Admin
}
public function render()
{
return view('livewire.orders.not-fitted', ['cancellationReasons' => OrderCancellationReason::casesWithTitles()]);
}
}
I am yet to hit that dd() section, sadly.
The relevant blade is rendered as so :
<div>
<button type="button" class="btn btn-danger ml-1" data-bs-toggle="modal" data-bs-target="#jobModal-{{ $product->id }}">
Confirm {{ \Str::plural('tyre', $product->count()) }} not fitted
</button>
<div class="modal fade" id="jobModal-{{ $product->id }}" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form wire:submit.prevent="saveData">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Confirm Cancellation</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-group">
<div class="form-check form-switch col-form-label">
<input wire:model="status" name="status" type="hidden" value="0">
<input wire:model="status" type="checkbox" id="status" name="status" class="form-check-input" value="1">
<label for="status" class="custom-control-label font-normal">
No work has been completed
</label>
</div>
</div>
<div class="form-group">
<label>Reason</label>
<select wire:model="reason" class="form-select">
<option value="" disabled selected> </option>
@foreach($cancellationReasons as $key => $reason)
<option value="{{ $key }}">{{ $reason }}</option>
@endforeach
</select>
</div>
</div>
<div class="modal-footer">
<div class="d-flex justify-items-end">
<button class="btn align-middle btn-success" type="submit">
<i class="fas fa-check"></i>
Save
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
The component gets loaded in via a foreach() loop.
<livewire:orders.not-fitted
wire:key="{{ $order->id }}"
:order="$order"
:product="$product"
/>
Any help appreciated, as this has me stumped.
Please or to participate in this conversation.