Wire:target in blade @if statement seem not work

gwillyoo · January 26, 2021, 11:52am

What seems to be the problem:

wire:target in blade with @if seem not working as expected. (please see video) What to expect: i click the “run” method, the buttons with wire:target=“run” will be disabled. and after the status running, the action will change and when i click the “stop” , the buttons wire:target=“stop” should be disabled.

Why did it not disabled ?

Code:

    <x-table.cell class="d-flex justify-content-end">
        @if($botserver->status->value === "inactive")
            <x-button.success wire:loading.attr="disabled" wire:click="run" class="btn-sm"><i class="icon ion-play"></i> Start</x-button.success>
            <x-button.edit wire:loading.attr="disabled" wire:target="run" wire:click="showEdit" class="mg-l-10">Edit</x-button.edit>
            <x-button.delete wire:loading.attr="disabled" wire:target="run" wire:click="showDelete" class="mg-l-10">Delete</x-button.delete>
        @else
            <x-button.success wire:loading.attr="disabled" wire:target="stop" wire:click="viewContainer" class="btn-sm"><i class="icon ion-eye"></i> View</x-button.success>
            <x-button.restart wire:loading.attr="disabled" wire:target="stop" wire:click="restart" class="mg-l-10">Restart</x-button.restart>
            <x-button.stop wire:loading.attr="disabled" wire:click="stop" class="mg-l-10">Stop</x-button.stop>
        @endif
    </x-table.cell>

Are you using the latest version of Livewire: yes

Do you have any screenshots or code examples:
https://drive.google.com/file/d/1tTrVcNB367x40y9BoozDx2_yvTlbUNLk/view?usp=sharing

gwillyoo · January 26, 2021, 1:19pm

Do anyone has other ideas / solution beside this ? Let’s discuss.

For now my workaround is creating 2 public property inside the component and change the blade component with AlpineJS.

    public bool $isInactive;
    public bool $isRunning;


    public function mount()
    {
        $this->serverStatusUpdated();
    }

    public function serverStatusUpdated()
    {
        if ($this->botserver->status->value === "inactive") $this->isInactive = true;
        if ($this->botserver->status->value === "running") $this->isInactive = false;

        $this->isRunning = !$this->isInactive;
    }

The Blade component with AlpineJs:

        <div x-data="{ open: @entangle('isInactive') }">
            <div x-show="open">
                <x-button.success wire:loading.attr="disabled" wire:click="run" class="btn-sm"><i class="icon ion-play"></i> Start</x-button.success>
                <x-button.edit wire:loading.attr="disabled" wire:target="run" wire:click="showEdit" class="mg-l-10">Edit</x-button.edit>
                <x-button.delete wire:loading.attr="disabled" wire:target="run" wire:click="showDelete" class="mg-l-10">Delete</x-button.delete>
            </div>
        </div>
        <div x-data="{ open: @entangle('isRunning') }">
            <div x-show="open">
                <x-button.success wire:loading.attr="disabled" wire:target="stop" wire:click="viewContainer" class="btn-sm"><i class="icon ion-eye"></i> View</x-button.success>
                <x-button.restart wire:loading.attr="disabled" wire:target="stop" wire:click="restart" class="mg-l-10">Restart</x-button.restart>
                <x-button.stop wire:loading.attr="disabled" wire:click="stop" class="mg-l-10">Stop</x-button.stop>
            </div>
        </div>

Do anyone has other ideas / solution beside this ? Let’s discuss.

faxunil · January 26, 2021, 1:23pm

Hi!
If this is a nested blade file, you should use wire:key for each row / field

gwillyoo · January 26, 2021, 1:26pm

@faxunil Yes, it is. the row already has wire:key.

faxunil · January 26, 2021, 1:55pm

Hi I don’t see in the code above. Did you tried with key?

gwillyoo · January 26, 2021, 2:17pm

Here is the table component.

<x-table class="mg-t-20">
    <x-table.heading class="thead thead-colored thead-primary">
        <x-table.head>Name</x-table.head>
        <x-table.head>Host</x-table.head>
        <x-table.head>Port</x-table.head>
        <x-table.head>VNC Port</x-table.head>
        <x-table.head>Container ID</x-table.head>
        <x-table.head>Status</x-table.head>
        <x-table.head>Action</x-table.head>
    </x-table.heading>
    <x-table.body>
        @forelse($servers as $server)
            <livewire:server::server-actions :server="$server" :key="'server-action-' . $server->id"/>
        @empty
            <x-table.row>
                <x-table.cell colspan="4">No Bot Server. Create a new one.</x-table.cell>
            </x-table.row>
        @endforelse
    </x-table.body>
</x-table>

here is my current and updated server-action / row blade component.

<x-table.row>
    <x-table.cell>{{ $server->name }}</x-table.cell>
    <x-table.cell>{{ $server->host }}</x-table.cell>
    <x-table.cell>{{ $server->port }}</x-table.cell>
    <x-table.cell>{{ $server->vncport }}</x-table.cell>
    <x-table.cell>{{ $server->container_id ?? "-" }}</x-table.cell>
    <x-table.cell>
        <div wire:loading>Loading...</div>
        <div wire:loading.remove>
            {{ $server->status->value }}
        </div>
    </x-table.cell>
    <x-table.cell class="d-flex justify-content-end">
        <div x-data="{ open: @entangle('isInactive') }">
            <div x-show="open">
                <x-button.success wire:loading.attr="disabled" wire:target="run,showEdit,showDelete" wire:click="run" class="btn-sm"><i class="icon ion-play"></i> Start</x-button.success>
                <x-button.edit wire:loading.attr="disabled" wire:target="run,showEdit,showDelete" wire:click="showEdit" class="mg-l-10">Edit</x-button.edit>
                <x-button.delete wire:loading.attr="disabled" wire:target="run,showEdit,showDelete" wire:click="showDelete" class="mg-l-10">Delete</x-button.delete>
            </div>
        </div>
        <div x-data="{ open: @entangle('isRunning') }">
            <div x-show="open">
                <x-button.success wire:loading.attr="disabled" wire:target="stop,restart,view" wire:click="viewContainer" class="btn-sm"><i class="icon ion-eye"></i> View</x-button.success>
                <x-button.restart wire:loading.attr="disabled" wire:target="stop,restart,view" wire:click="restart" class="mg-l-10">Restart</x-button.restart>
                <x-button.stop wire:loading.attr="disabled" wire:click="stop" wire:target="stop,restart,view" class="mg-l-10">Stop</x-button.stop>
            </div>
        </div>
    </x-table.cell>
</x-table.row>

After checking again, do you mean i should put the wire:key in <x-table.row> ? Now, i use the :key on my custom component (livewire:server::server-actions). What is the different ?

faxunil · January 26, 2021, 2:35pm

Hi!
put the key into the row section <x-table.row wire:key=“server-action-’ . $server->id”>

In my cas i pass the wire:key as a separat variable from the parent and in the child I put the same name as above.
Try it maybe will help

faxunil · January 26, 2021, 2:36pm

I think in the row you should use the same format “server-action-…id…”

gwillyoo · January 26, 2021, 2:51pm

Just tried put the wire:key in the row, revert back the cell to my first post using @if @endif , the problem occur, same as the video i’ve attached.

First action button, the wire:loading.attr and wire:target seem working. after it changed, it is not working.

faxunil · January 26, 2021, 2:52pm

Sorry I don’t have any other idea.

gwillyoo · January 26, 2021, 2:56pm

No problem, I am new and still try to understand this Livewire. I hope that someone who knows better can help.

skywalker · January 26, 2021, 8:06pm

Hey, @gwillyoo

Your code seems legit, can you show us the component code (e.g: <x-button.edit>)

You have 2 options. You can see the docs, or you can try to test wire:loading in different element. For example:

<button wire:click="submit">submit</button>
<span wire:loading wire:target="submit">loading ...</span>

You can see the docs:

gwillyoo · January 26, 2021, 8:25pm

Funny things happen. My <x-button.edit> inside a component in a component.

here is my x-button.edit component

<x-button.primary  {{ $attributes->merge(['class' => 'btn-sm']) }}><i class="icon ion-edit"></i> {{ $slot }}</x-button.primary>

my x-button.primary component

<x-button wire:loading.attr="disabled" {{ $attributes->merge(['class' => 'btn-primary']) }}>{{ $slot }}</x-button>

and finally the x-button component:

<button {{ $attributes->merge(['class' => 'btn' . ($attributes->get('disabled') ? ' opacity-75 disabled' : ''), 'type' => 'button']) }}>{{ $slot }}</button>

Hahaha… what have i done ? i feel silly right now. I should make it simple.
Currently my last post is working as i expect. But, is there any reason why @if @endif is not working?

skywalker · January 27, 2021, 7:46am

Just make it as simple as possible (make it stupid) and refactor your code when things working.

I can’t tell you the reason specifically right now but, try to debug your code first, for example try with <x-button> first and after that with <x-button.primary> … in my opinion I don’t see a reason to make the primary button, you can just add classes for that since the classes are few.