Issue when trying to use entagle

[cloudwales]

Hi.

Its more than likely a me problem, but I’m trying to create Tabs for a component using alpine but I want it to grab the select tab from the component, i.e when theres #my_tab selected in the route, it opens that tab.

So far I have::

// View

<div x-data="{selectedTab: @entangle('selectedTab')} ">

    // Tab Nav
    <button wire:click=" selectTab('tab-1') ">
        My Tab 1
    </button>
    
    <button wire:click=" selectTab('tab-2') ">
        My Tab 2
    </button>

    <div x-show="selectedTab === 'tab-1'">
        // Stuff goes here
    </div>

    <div x-show="selectedTab === 'tab-2'">
        // Stuff goes here
    </div>

</div>

// Component

    public $selectedTab = 'dispatch';

    public function selectTab($tab)
        {
            $this->selectedTab = $tab;
        }

But for some reason (which is probably obvious to most) It wont change the tab!

Eventually I’m wanting it so that when I set the tab through the route if needed so that when the page is refreshed it stays on the same route. So i’d have to set it so the buttons are a href and add a #

Any help or pointers where to look would be great

[skywalker]

Hey, @cloudwales

What would be the output of dd($tab) in the selecTab method? Meaning, is the selectTab method working when hit the button or not?

[cloudwales]

Ye thats what was catching me, It isn’t dd() ing… It doesn’t want to find it. I had a problem the other day which was due to the root div’s, I need to take a look and see if that has anything to do with it just in case its missing.

[xtreme2020]

Hi, for visibility rules is better let alpine do the job, cause things looks a little slow when making that kind of operation with livewire

You can achieve this like this

<div x-data='{activetab:1}'>

<button x-on:click="activetab=1">tab 1</button>
<button x-on:click="activetab=2">tab 2</button>

<div x-show="activetab===1">Stuff here</div>
<div x-show="activetab===2">Stuff here</div>
</div>

You got the idea
This way you will have better UX y less server roundtrip

Another tip, you use entagle to sync properties(frontend with backend) so if you want to use it for other operation or this one (Not recommended for visibility actions)
you will have something like

<div x-data="activetab:@entangle('selectedtab')">
<button x-on:click="activetab=1">Tab 1</button>

when you click this button, then this value is going to be sync with your backend property, so your selectedtab property will be 1 now
<div/>

[anejjar]

if want to use only livewire .