Simple wire:click not working

#1

Hello everyone hope you are doing okay!
So i just have a very simple button with wire:click in a component and it’s not working. I can’t see why i tried everything.

<button wire:click="test" class="flex items-center px-4 py-2 text-blue-500 border-2 border-blue-500 rounded-full shadow hover:bg-blue-500 hover:text-white">
                                        Test
                                    </button>

And that’s the function in the component

public function test()
{
    dd("test");
}

Thank you!

#2

this is inside div container???

#3

Yes it’s in a table, table row and a div

<div class="w-20 h-10">
                            <div
                                class="relative flex flex-row content-center justify-center w-full h-8 border-2 border-green-200">
                                {{-- <input type="number" value="{{ $item->qty }}"
                                class="w-full font-semibold text-center text-gray-700 bg-gray-200 outline-none focus:outline-none hover:text-black focus:text-black" /> --}}
                                <button wire:click.prevent="increaseQuantity('{{ $item->rowId }}')"
                                    class="text-gray-500 focus:outline-none focus:text-gray-600">
                                    <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                                        <path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z">
                                        </path>
                                    </svg>
                                </button>
                                <p>{{ $item->qty }}</p>
                                <button wire:click.prevent="decreaseQuantity('{{ $item->rowId }}')"
                                    class="text-gray-500 focus:outline-none focus:text-gray-600">
                                    <svg class="w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                                        <path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
#4

where is the test button in the table referenced above? Is this snippit wire:click=“test” being rendered from your component or just in a view somewhere?

#5

but this buttons don’t work too??? some issue in browser dev console???

#6

Yes here in the second one i removed the test button, but it’s the same thing.
Here’s the function for the decrease button

public function decreaseQuantity($rowId)
{
    $product = Cart::get($rowId);
    $qty = $product->qty - 1;
    Cart::update($rowId, $qty);
}
#7

There’s no error in the browser dev console.

#8

I have the same function and buttons in another component and they are working perfectly, just in this component they don’t work…

#9

seems odd, there’s something being missed. You didn’t show on your test button wire:click.prevent. Prevent will not send the request as it seems you need, by the way

#10

I tried removing the prevent but same thing.
So for the test button i just commented the increaseQuantity button and put the test button, so it’s the same thing.

#11

and this is the generated blade of the component right? when you click on the button, in the console Network tab see if something is request to backend? Can you see if the blade is rendering the @livewireStyles and @livewireScripts directive? There is any other JS code that could be crashing here?

#12

Here’s the full code of the blade view, i think because the buttons are on a loop?
Nothing is happening in the console when i click the button

#13

You’re using Crinsane/LaravelShoppingcart, Is this within a Livewire Component? Can you post your component

#14

I’m using hardevine/LaravelShoppingcart but it’s similar.


Yes it’s within a Livewire component.
Here’s my ShoppingCart component

#15

The “public int $qty = 0;” is not there anymore just forget it.

#16

the pastebin code above for Cart Blade is this view (just verifying since this render is calling something else) ->

public function render() { return view('livewire.cart-component')->layout('_layouts.master'); }

#17

Yes that’s where i have the cart and the buttons that i’m trying the implement.
cart-component.blade.php

#18

Out of curiosity I loaded everything and that is a very strange problem. Its only within the table does the wire:click not work. I placed the buttons in the first div with “Votre panier” and was able to get a livewire response. But again, the wire:click listener was outside of the html table

#19

You see that it’s very strange…
I’m sure it’s because it’s in the foreach loop, but why? i don’t know… still couldn’t find a solution.

#20

You didn’t have all of your div tags closed, and livewire usually needs an empty div surrounding everything. I think you’ll have some fighting to do for livewire to update the item qty, but try this in your component blade view and you should be able to see the livewire requests back to the component methods fixed cart.blade