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.
Leave a Reply