I want to really take care of this english blog and write daily or at least weekly. In order to do this, I am starting the Work Log category here where I can post bits of code or advice from my daily work as a programmer.

Today’s note is about Livewire which is an awesome tool for Laravel Framework that allows you to write rich interactive components using server side PHP code. I was very skeptical about this technology until I tried it for the first time in a bigger project. I had a full React-GraphQL front-end for a client app and keeping the state in two locations (backend and frontend) was messy and I was ready to throw the towel on the project. Then I decided to rewrite it using Livewire and pure php and the code became more maintainable and clean. And I got rid of the API and React for this project, it was not a great fit.

Anyway, here’s what I learned today!

I had a weird bug that for some HTML elements the wire:click event did not register properly but only in some situations like changing the dom contents on Livewire without refreshing the page. I even went ahead and opened an issue on Github.

But shortly after opening that PR I remembered something about having to add wire:key to looped items to avoid wrong dom diffing. This is specified in the troubleshooting page of the documentation.

So the basic idea is that this:

@foreach($items as $idx => $item)
<input type="text" name="value" wire:model="x" />
@endforeach

Has to become this in order to avoid weird DOM diffing issues:

@foreach($items as $idx => $item)
<input type="text" name="value" wire:key="{{$idx}}" wire:model="x" />
@endforeach

Adding a wire:key is highly recommended especially when having a loop that renders HTML elements on the page.

Symptoms that you need to add wire:key:

• An input element loses focus
• An element or group of elements disappears suddenly
• A previously interactive element stops responding to user input
• A loading indicator misfires
• A user action no longer functions
• Wire:model not working
• Wire:change not working

This is what I learned the hard way today. Hope this post will help at least one person.