Button don't sync with model

ralf · November 22, 2020, 11:55pm

Hi,

i try to build an Toggle button between two payment plans.

This is the component:

class Shop extends Component
{
    public $activePlan;

    /**
     * @return Application|Factory|View
     */
    public function render()
    {
        $productData = (new CRMServiceHandler())->getProducts()->getResponse();

        foreach ($productData['paymentCycles'] as $paymentCycle) {
            if ($paymentCycle['picked'] === 1) {
                $this->activePlan = $paymentCycle['id'];

                break;
            }
        }

        return view(
            'livewire.shop',
            [
                'paymentCycles' => $productData['paymentCycles'],
                'products' => $productData['products'],
            ]
        );
    }
}

And this is my blade File:

    <div class="container">
         <div class="mt-6 bg-gray-100 rounded-lg p-0.5 flex sm:mt-8">
                <p>{{ $activePlan }}</p>
                @foreach($paymentCycles as $paymentCycle)
                    <button type="button"
                            class="rounded-full py-3 px-6 border border-blue-primary"
                            wire:model="activePlan"
                            wire:click="$set('activePlan', {{ $paymentCycle['id'] }})"
                    >
                        {{ $paymentCycle['title'] }}
                    </button>
                @endforeach
            </div>
    </div>

And this is my start blade

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Finde die beste Möglichkeit für dich</title>

        <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">

        <link href="{{ mix('css/app.css') }}" rel="stylesheet">
        @livewireStyles
    </head>

    <body>
        <livewire:navigation  />

        <livewire:shop />

        <livewire:footer />

        @livewireScripts
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

So, i see the active Plan, i see to two Buttons, what is correct. But when i click on one of the Buttons the activePlan doesn’t change. There is no network activity too.

What do i wrong?

Cheers
Ralf

TheStupidUglyBoy · November 23, 2020, 3:28am

what is you set some wire key inside the button will it work ? thanks

ralf · November 23, 2020, 10:42am

Hi,
i add

wire:key="{{ $loop->index }}"

in the Button. But this have no effects

Dimonka2 · November 23, 2020, 11:26am

Hi, your code looks good for me. For a button you do not need this bit at all:

wire:model="activePlan"

Can you share how the component is rendered in the browser? Maybe this will give a hint where the issue is.

ralf · November 23, 2020, 12:01pm

sure, here it is:

<div class="mt-6 bg-gray-100 rounded-lg p-0.5 flex sm:mt-8">
    <p>2</p>
    <button type="button" class="rounded-full py-3 px-6 border border-blue-primary" wire:model="activePlan" wire:key="0" wire:click="$set('activePlan', 2)">
        Monatliche Abrechnung
    </button>
    <button type="button" class="rounded-full py-3 px-6 border border-blue-primary" wire:model="activePlan" wire:key="1" wire:click="$set('activePlan', 1)">
        Jährliche Abrechnung
    </button>
</div>

ralf · November 23, 2020, 2:48pm

@Dimonka2 @TheStupidUglyBoy
Maybe it makes sense, that i push my repro public, that you can have an look on it? Maybe some other stuff is broken?

Dimonka2 · November 23, 2020, 4:39pm

For me everything looks perfect. You can easily get rid of

wire:model="activePlan" wire:key="0"

Check also the console output in browser, maybe there is an error there. Like Livewire not found or outdated or anything like this.

ralf · November 23, 2020, 5:00pm

If you can see, there is no error. But there is no network traffic when i click on the button. This should be, or not?

Dimonka2 · November 23, 2020, 5:09pm

I do not see any issue, why it could not working.

Check also if there is an event on your buttons (“Inspect element” on a button).

And one more wired thing to check: take a look into your browser rendered code if @livewireStyles and @livewireScripts are rendered into styles and scripts. Sometimes blade engine fails to render those command correctly.

ralf · November 23, 2020, 5:31pm

It looks like, there is no event?!

Here you see the rendere livewire scripts

ralf · November 23, 2020, 11:06pm

So, i add that for an test:

<input wire:model="activePlan" type="text">

Now, it should change the innerText from the activePlan in the p-Tag, when i typing something, correct? But nothing happens. There is no network request. Is there an problem with https or something like that?

Dimonka2 · November 24, 2020, 8:51am

Even in case a problem with different domains/protocols you will see something (error) in console or in the network activity. I will try today setup a Laravel playground to show that your code is OK. The problem is somewhere else.

Have you published Livewire assets?

php artisan livewire:publish --assets

I am sure you did otherwise you would see it in console.

ralf · November 24, 2020, 9:13am

It’s the same Domain, runs local in a Docker. There is no error in the console, but that irritates me:

Maybe Chrome doesn’t accept the localhost SSL Certifikates, maybe Chrome blocks the running from the js? Otherwise the alpine stuff is working…

I can put my code into an git repro, if its help

Dimonka2 · November 24, 2020, 10:43am

There was a slight problem with the logic in your code. You have always reset active plan to the one from your CRM service. Here is working example:

I hope this helps you to fix it on your side.

ralf · November 24, 2020, 3:34pm

Hi,

thanks for the Playground. But it doesn’t work in my Enviroment.

I look at the network console from the Playground, and everytime when the Button is pressed, an request is fired. Even if the if(!$this->activePlan) is missing.

In my enviroment a request is never fired. I think this is more an JS Problem? I don’t understand whats goring wrong

Dimonka2 · November 24, 2020, 8:16pm

Try also to check whether /vendor/livewire/livewire.js is loaded. And it looks like you have a mix of http/https protocols - it may also lead to some browser issues.

ralf · November 24, 2020, 8:42pm

Yes, i checked it:

It’s accessable and loaded.

Can you check this out:

Is this still running in your env?

Dimonka2 · November 25, 2020, 12:17pm

Your livewire shop blade was wrapped by section, extended by layout and so on. This was not right. You have done all of this in your “welcome” blade.

So. If you change your blade to:

    <div>
        <div class="border-b">
            <div class="container mx-auto flex justify-between content-center my-3">
                <p class="text-lg font-bold">Store</p>
                <a href="#" class="text-gray-text hover:text-blue-primary">
                    Häufig gestellte Fragen
                </a>
            </div>
        </div>
        <div class="relative border-b">
            <div class="mr-4">Active plan: {{ $activePlan }}</div>
            @foreach($paymentCycles as $paymentCycle)
                <button type="button"
                        class="rounded-full py-3 px-6 border border-blue-primary"
                        wire:click="$set('activePlan', {{ $paymentCycle['id'] }})"
                >
                    {{ $paymentCycle['title'] }}
                </button>
            @endforeach
        </div>
    </div>

It will work. And make sure that your livewire components have one root elements.

ralf · November 25, 2020, 1:07pm

Oh fuck, this hurts

Thank you man, you are an god