Solving wire:click not working

When Livewire is not working, it can be frustrating

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.

Never miss another post!

Get my latest articles delivered directly to your inbox.

Never miss another post!

Get my latest articles delivered directly to your inbox.

Upcoming Course

Break Free From Tutorials!

A software development course that doesn’t get you stuck with specifics from a tutorial, but challenges you to think like a software architect. 

🙏

Great Choice!

Thanks for enabling notifications! Don’t worry, I hate spam too and I won’t ever disclose your contact information to 3rd parties.