Troubleshooting

Dom Diffing Issues

The most common issues encountered by Livewire users has to do with Livewire's DOM diffing/patching system. This is the system that selectively updates elements that have been changed, added, or removed after every component update.

For the most part, this system is reliable, but there are certain cases where Livewire is unable to properly track changes. When this happens, hopefully, a helpful error will be thrown and you can debug with the following guide.

Symptoms:

• An input element loses focus
• An element or group of elements dissapears suddenly
• A previously interactive element stops responding to user input
• A loading indicator mis-fires

Cures:

• Add wire:key to elements inside loops:

        
1<ul>
2    @foreach ($items as $item)
3        <li wire:key="{{ $loop->index }}">{{ $item }}</li>
4    @endforeach
5</ul>    

• Add key() to nested components in a loop

        
1<ul>
2    @foreach ($items as $item)
3        @livewire('view-item', ['item' => $item], key($loop->index))
4 
5        <!-- key() using Laravel 7's tag syntax -->
6        <livewire:view-item :item="$item" :key="$loop->index">
7    @endforeach
8</ul>    

• Wrap Blade conditionals (@if, @error, @auth) in an element

        
1<input type="text" wire:model="name">
2<div> @error('name'){{ $message }}@enderror </div>    

• Add wire:key. As a final measure, adding wire:key will directly tell Livewire how to keep track of a DOM element. Over-using this attribute is a smell, but it is very useful and powerful for problems of this nature.

        
1<div wire:key="foo">...</div>
2<div wire:key="bar">...</div>    

Checksum Issues

On every request, Livewire does a "checksum" but in some cases with arrays, it can throw an exception even when the data inside the array is the same.

Because in PHP an array can have keys that are alpha-numeric and numeric keys in the same array and in any order, but Javascript will make an object of it because it doesn't support arrays with keys that are alpha-numeric. When Javascript is creating an object it will also reorder the keys, it will place numeric keys before alpha-numeric keys.

This causes a problem when the JSON is sent back because the "checksum" will look different.

Some types (Point, LineString, Polygon, and the Multi- variations) will also fail this checksum.

So make sure when you have a public property that is an array numeric keys are before alpha-numeric character keys.

        
1class HelloWorld extends Component
2{
3    public $list = [
4        '123' => 456,
5        'foo' => 'bar'
6    ];
7    ...