Have you tried everything? Double-checked all of your work and your Livewire component with wire:click not working!? Feel like punching the screen? No worries. I felt the same way.
I was working on a project for a client of mine and I just couldn’t figure out for the life of me why my Livewire components weren’t working. I had to take a mental break and leave the problem for the next day. As it happens sometimes with really tricky bugs that a break like that allowed me to start with a fresh mind and figure the problem out.
I’m going to go through step-by-step what things you need to check to make sure wire:click is working.
Fundamental steps to make sure wire:click is working
Table of Contents
Check livewire scripts is included
This might seem straightforward, but make sure that your Livewire scripts is included with @livewireScripts
or <livewire:scripts />
. Confirm this in your dev tools such as Chrome DevTools.
Check wire:click is in the Livewire component’s view
The wire:click
attribute is only something that Livewire understands and unless it’s in the view that you call in the render
method of your Livewire component, it won’t be interpreted by Livewire.
DOM should have wire:id assigned to the element, if not start at 1 again
If there’s wire:id
attribute assigned you know you’re heading in the right direction. If you also see a wire:initial-data
that means that Livewire hasn’t fully registered the component yet, but we’ll get to that later.
Check name matches the method in the Livewire component’s class
This one’s simple, but absolutely make sure that the method you specify in wire:click
matches one-to-one to method in the Livewire component.
None of the above, rescan for Livewire components
So if you tried all of the above it’s possible that Livewire doesn’t even know your component exists in the DOM. This could happen for instance, if you’re pulling in the Livewire component after an AJAX request happens. On page load Livewire scans for Livewire components in the DOM and if there are more after the page loads, Livewire doesn’t know that those exist.
One sign that Livewire hasn’t registered a component yet is that in the DOM the element has a wire:initial-data
attribute that still shows up. It’s up to you to rescan the DOM when it’s most appropriate to.
Fortunately, there’s Livewire.rescan()
that does just that.
The way I figured that I needed to do that is because I didn’t fundamentally understand how Livewire worked. Once I told myself, “I really need to know how Livewire works so I could figure out this odd behavior”.
That’s when I found this very useful article by the creator of Livewire on how Livewire works here. I encourage you to read it if you think it behaves in a weird way sometimes and you’re not sure why.
Wire:click not working, no problem
Now you have everything you need to fix this issue. If I could leave you with a major programming lesson is to go through your checklist and understand the underlying technology, in this case Livewire.
If you liked this article you might also like Building a Music Search Engine with Livewire.