Wire:key Demo

WITH wire:key RANDOM wire:key PARTIAL KEY NESTED COMPONENTS

WITHOUT wire:key (BROKEN)

Learn Laravel

Master Livewire

Build awesome apps

Test Instructions

1 Type different text in each input field
2 Use the ↑/↓ buttons to reorder items
3 Notice the input values stay in wrong positions!
4 Delete an item and see how the state gets mixed up

Code Structure:

PHP Component:

class TodoListWithoutKey extends Component
{
    public $todos = [];

    public function moveUp($todoId) { /* reorder logic */ }
    public function moveDown($todoId) { /* reorder logic */ }
    public function deleteTodo($todoId) { /* delete logic */ }
}

Blade Template:

@foreach($todos as $index => $todo)
    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md border">
        <div class="flex items-center flex-1">
            <input
                type="checkbox"
                wire:click="toggleTodo({{ $todo['id'] }})"
                {{ $todo['completed'] ? 'checked' : '' }}
                class="mr-3"
            >
            <span class="{{ $todo['completed'] ? 'line-through text-gray-500' : '' }}">
                {{ $todo['text'] }}
            </span>
            <input
                type="text"
                placeholder="Type something to see the issue"
                class="ml-3 px-2 py-1 text-xs border border-gray-300 rounded w-40"
            >
        </div>
        <div class="flex space-x-1">
            <button wire:click="moveUp({{ $todo['id'] }})">↑</button>
            <button wire:click="moveDown({{ $todo['id'] }})">↓</button>
            <button wire:click="deleteTodo({{ $todo['id'] }})">Delete</button>
        </div>
    </div>
@endforeach

BROKEN: No wire:key attribute on the div!