Wrote on

Note to self: add wire:key to Livewire elements

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.

Debugging is cool - 9GAG

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

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Copyright © 2024 all rights
are not
reserved. Do whatever you want, it's a free country.
Guess it's obvious, but the theme is created by myself with Tailwind CSS. You can find the source code here.
I still use WordPress 🧡. The theme is custom Laravel though 😎.