Livewire 3.6.10 with Laravel 11: wire:model not binding input value after page refresh
I'm working with Laravel 11, Livewire 3.6.10, and Alpine.js (properly configured). I'm encountering an issue where wire:model doesn't bind the value to an input field after a page refresh, even though the variable is correctly set in the component.
What Works
- Items are listed correctly in a table.
- Adding a new item works perfectly.
- Clicking "Edit" immediately after adding an item shows the form with values populated (including the input field).
The Issue
If I refresh the page and then click "Edit" on an item:
- The variable
{{ $name }}displays correctly. - But the input field bound with
wire:model="name"does not show the value.
Code Snippets
<table class="min-w-full">
<thead>
<tr>
<th>#NO</th>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach ($list as $item)
<tr>
<td>{{ $loop->iteration }}</td>
<td>{{ $item->name }}</td>
<td>
<button wire:click="edit({{ $item->id }})">Edit</button>
</td>
</tr>
@endforeach
</tbody>
</table>
Edit Form
{{ $name }} <!-- Displays correctly -->
<form wire:submit.prevent="{{ $isEdit ? 'update' : 'store' }}">
<input type="text" wire:model="name">
</form>
Edit method
public function edit($id)
{
$inventory = ModelsInventory::findOrFail($id);
$this->inventory_id = $id;
$this->name = $inventory->name;
}
Debugging Summary
$nameis correctly populated.{{ $name }}displays the expected value.- However,
<input wire:model="name">does not reflect the value after a page refresh.
Question
Why is the value not binding to the input via wire:model after a page refresh, even though the component variable is correctly populated?
Note: the project is created with starter kit, laravel breeze, it has livewire and alpine configured.
app.js
import Alpine from 'alpinejs'
import persist from '@alpinejs/persist'
import './bootstrap'; // assuming Livewire's stuff is here
// Only register Alpine once (before Livewire boots it)
window.Alpine = Alpine
Alpine.plugin(persist)
There are no browser console errors.
I have found a code snippet online that says as follow
Force DOM Update with Alpine
<input type="text"
wire:model="name"
x-data
x-init="$nextTick(() => { $el.value = '{{ $name }}' })">
I have tried this snippet, surprisingly it worked.
But the problem is that, I don't want these extra things in my input field, I want to use only wire:model="name" and it should work.
Answer
Since you're using Livewire 3.6.10, Laravel 11, and Alpine.js (which is already configured), the best solution to ensure proper two-way binding after page refresh is:
Use Alpine's @entangle to Bridge Livewire and DOM
Replace this:
<input type="text" wire:model="name">
With this:
<input type="text" x-data x-model="@entangle('name')">
Working Example:
<form wire:submit.prevent="{{ $isEdit ? 'update' : 'store' }}">
<input type="text" x-data x-model="@entangle('name')" class="border rounded p-1">
</form>