Laravel livewire wire:model with array
Stefan Bogdanescu
Founder & Senior Architect · 2026-06-29
# Mastering Livewire Arrays: Synchronizing Database Data with User Input
As developers building dynamic interfaces with Laravel, Livewire offers incredible power in bridging the gap between server-side logic and front-end interactivity. When dealing with collections of data—such as shopping carts, product lists, or complex forms involving arrays—synchronizing the initial database state with user-driven updates can often feel like navigating a maze.
This post addresses a very common challenge: how to correctly display existing quantities from the database in a Livewire input field, allow the user to modify them, and ensure those changes are persisted back to the database reliably. We will walk through the best practices for managing array data within Livewire components.
## The Challenge: Displaying and Updating Array Data
You are aiming to achieve this structure:
1. Load an array of product quantities from the `Cart` table into your Livewire component.
2. Render these quantities in input fields so the user can edit them.
3. When the user changes a value, trigger an update to the database.
The initial attempt often involves trying to mix data fetching and mutation within the rendering cycle, which can lead to synchronization issues.
## The Livewire Solution: State Management is Key
The core principle in Livewire development is separating **State** (what the component knows) from **Actions** (what the component does). We need to ensure that when we load the data for display, it populates the component's state, and when an action occurs, it triggers a specific update method.
### Step 1: Initializing State from the Database
Instead of trying to fetch and update everything inside the `render()` method (which is primarily for rendering HTML), you should initialize your properties with the data you need *before* Livewire renders the view. This ensures the initial state is correct.
Let’s assume you are loading cart items into a component.
```php
// In your Livewire Component class
class CartComponent extends Component
{
public $cartItems = []; // This will hold our array data
public function mount()
{
// Load the initial data from the database when the component is initialized
$this->loadCartData();
}
protected function loadCartData()
{
// Fetch all necessary cart items for the current user
$this->cartItems = Cart::where('user_id', Auth::id())->get()->toArray();
}
public function render()
{
return view('livewire.cart-component', [
'items' => $this->cartItems,
]);
}
// ... rest of the component
}
```
### Step 2: Binding Data in the Blade View
Now that `$this->cartItems` holds the array data, we can iterate over it to create our inputs. The `wire:model` directive binds directly to the properties on the component instance.
Notice how we access the specific item's quantity using array indexing (`$item['qty']`) or by iterating over the collection in PHP before rendering.
```html
{{-- Inside your Blade file --}}
@foreach ($items as $item)
{{-- Use wire:model to bind directly to the array index if necessary, or use a specific property for clarity --}}
@endforeach
```
**Note on `wire:model`:** Using dot notation (`items.{$item['product_id']}.qty`) allows Livewire to track changes specifically for that indexed item within the `$items` array, making updates precise.
### Step 3: Handling Updates with Events (The Crucial Step)
When dealing with form submissions and database writes in Livewire, it is generally safer and more efficient