Need help with wire:click not working

#1

Hi all,

I’m new to Livewire, and am implementing a project for a client of mine. For some reason I can’t get wire:click to call a function in my component. I have done small tutorials from Livewire site from Caleb and those work fine, just not in my own project. Maybe someone can spot the stupid mistake I am making?

I’m using “livewire/livewire”: “^1.3”. Below is my Livewire component blade template:

@include('layouts.template')

@section('content')

<div class="flex justify-center mt-12">

    <table class="table-fixed mb-8">

        <thead>

          <tr>

            <th class="w-1/2 px-32 py-2 text-yellow-400">Name</th>

            <th class="w-1/4 px-32 py-2 text-yellow-400">Compromises</th>

            <th class="w-1/4 px-32 py-2 text-yellow-400">Download</th>

          </tr>

        </thead>

        <tbody>

          @foreach ($clients as $client)

            @if ($loop-> index % 2 )

              <tr class="bg-gray-600">

            @else

              <tr class="bg-gray-700">

            @endif

                <td class="border px-32 py-2 text-center">{{ $client['title'] }}</td>

                <td class="border px-64 py-2 text-center">{{ $client['compromise_count'] }}</td>

                <td class="border px-32 py-4">

                    <button 

                        wire:click="downloadReport({{ $client['uuid'] }})" 

                        class="bg-gray-300 text-black font-semibold px-4 py-2 w-32 hover:bg-yellow-400 hover:text-white">Download

                    </button>

                </td>

              </tr>

          @endforeach

        </tbody>

      </table>

</div>

@endsection

So that calls a function called downloadReport(), and in Chrome developer console I can see that it is picking up the UUID of the customer fine and passing it through:

<button wire:click="downloadReport(7453a5d0-6a44-4510-a25c-34bec60738bc)" class="bg-gray-300 text-black font-semibold px-4 py-2 w-32 hover:bg-yellow-400 hover:text-white">Download</button>

This is my Livewire component function:

public function downloadReport($uuid)
{
  // my code here, but this function never fires
}

And I have this route in web.php:

Route::livewire('/darkweb', 'lwdarkweb')->layout('layouts.template');

Interestingly the mount() function works perfectly fine! I just can’t get the downloadReport() function to fire. I’m just really stuck and can’t figure this out :frowning:

Also in my layouts.template file I do have the <livewire:styles /> and <livewire:scripts /> added into head and body respectively. Here’s a small snip of my table with the Download buttons for some context:

example
example1444×694 25.5 KB

Let me know what other info you may need to help me?

Thanks!
Hendrik

#2

Hey @HendrikZA,

there are some things that are a bit strange to me.
First of all, you set the layout of your Livewire component to “layouts.template” (which is totally fine), but than you include that in your components template.

Also you wrap the content of your template in a “section”, which you shouldn’t do, as this is handled by Livewire.

So my guess is, that Livewire is not properly initialized because of the “wrong” markup. I have never tested a setup like yours, so this is a pretty wild guess :smiley:

Do you see any request triggered in the Networks tab of the Devtools when you click the button?
Are there any errors in your console?
Have you tried putting single quotes around the UUID? I’m not sure how the String will be handled when it is no String.

#3

Hey @maxeckel,

Thanks for your reply. Actually yeah you make some fair points about the include and section, I’ve removed those now. When I click the button I don’t see any request being triggered in Networks which is odd. I’ll also try wrap the UUID in single quotes as that makes sense as currently I haven’t yet set up handling non-strings being passed.

I think you are right, I’m likely setting all my stuff up completely wrong. I’ll give my config another proper look and see what I have done wrong.

#4

Hey @maxeckel,

It’s working! So I removed the include, as well as the section, and I also wrapped the UUID in single quotes and BOOM it fired and my report has downloaded and is working great!

Thank you soooo much! :slight_smile:

#5

Hey @HendrikZA,

glad it is working now! I’m always happy to help :wink:

1 Like
#6

I have a long way to go to master Livewire but this has really helped me understand the structuring of my component better, thanks again :slight_smile: