In Livewire 3, nested data binding is no longer supported. You will need to explicitly bind and declare each attribute in your component.
To update your code to work with Livewire 3, you will need to make the following changes:
- Remove the
$invoiceproperty from your component and declare each attribute individually.
namespace App\Livewire\Invoices;
use Livewire\Component;
class InvoiceCustomerDetails extends Component
{
public $customer_ref;
public $date;
//Validation rules.
protected $rules = [
'customer_ref' => 'nullable|min:1|max:100',
'date' => 'required|date_format:Y-m-d\TH:i:s',
];
public function render()
{
return view('livewire.invoices.invoice-customer-details');
}
}
- Update your view to use the new attribute names.
<div>
<form wire:submit="submitForm" autocomplete="off">
<div class="row">
<div class="col-md-12 mt-1">
<div class="row mb-2">
<label for="CustomerRef" class="col-sm-4 col-form-label col-form-label-sm">Customer Ref</label>
<div class="col-sm-8">
<input wire:model.debounce.500ms="customer_ref" type="text" name="customer_ref" class="form-control form-control-sm @error('customer_ref') is-invalid @enderror" id="CustomerRef" placeholder="Customer reference" autofocus>
@error('customer_ref')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
</div>
<div class="row mb-2">
<label for="Date" class="col-sm-4 col-form-label col-form-label-sm">Date</label>
<div class="col-sm-8">
<input wire:model.debounce.500ms="date" type="datetime-local" name="date" class="form-control form-control-sm @error('date') is-invalid @enderror" id="Date" placeholder="dd/mm/yyyy H:i" @cannot('administer') disabled @endcannot>
@error('date')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
</div>
<button type="submit" class="btn btn-sm btn-primary text-white float-end"><i class="fas fa-save me-1"></i> Save</button>
</div>
</div>
</form>
</div>
By making these changes, your component should work as expected in Livewire 3.