F
Filament•2y ago
Matthew

Undefined variable $activeTab

Im trying to make tabs in a blade component, but I get this error. Any idea why? 
<x-filament::tabs label="Content tabs">
    <x-filament::tabs.item
        :active="$activeTab === 'tab1'"
        wire:click="$set('activeTab', 'tab1')"
    >
        Tab 1
    </x-filament::tabs.item>

    <x-filament::tabs.item>
        Tab 2
    </x-filament::tabs.item>

    <x-filament::tabs.item>
        Tab 2
    </x-filament::tabs.item>
</x-filament::tabs>
<x-filament::tabs label="Content tabs">
    <x-filament::tabs.item
        :active="$activeTab === 'tab1'"
        wire:click="$set('activeTab', 'tab1')"
    >
        Tab 1
    </x-filament::tabs.item>

    <x-filament::tabs.item>
        Tab 2
    </x-filament::tabs.item>

    <x-filament::tabs.item>
        Tab 2
    </x-filament::tabs.item>
</x-filament::tabs>
Solution:
Ok, so do you have a public string $activeTab property on your Livewire component?
Jump to solution
16 Replies
Patrick Boivin
Patrick Boivin•2y ago
Looks like your $activeTab variable is undefined Not sure of the context but maybe $this->activeTab, in a Livewire component?
Matthew
MatthewOP•2y ago
This is taken straight from the docs.
Matthew
MatthewOP•2y ago
Matthew
MatthewOP•2y ago
Matthew
MatthewOP•2y ago
Could something be wrong with the docs?
Patrick Boivin
Patrick Boivin•2y ago
Right, I think the docs is just focusing on what it would look like on the Blade side to keep things simple. It really depends on the context though. Are you in a Livewire component? Can you use the Alpine example instead? 
<x-filament::tabs x-data={ activeTab: 'tab1' }>
    <x-filament::tabs.item
        alpine-active="activeTab === 'tab1'"
        x-on:click="alpineActive = 'tab1'"
    >
<x-filament::tabs x-data={ activeTab: 'tab1' }>
    <x-filament::tabs.item
        alpine-active="activeTab === 'tab1'"
        x-on:click="alpineActive = 'tab1'"
    >
Matthew
MatthewOP•2y ago
Yah, I am
Solution
Patrick Boivin
Patrick Boivin•2y ago
Ok, so do you have a public string $activeTab property on your Livewire component?
Matthew
MatthewOP•2y ago
I dont
Patrick Boivin
Patrick Boivin•2y ago
Add it, then use $this->activeTab instead in your Blade view
Matthew
MatthewOP•2y ago
That removes the error, but it only shows Tab 1: 
<x-filament::tabs>
    <x-filament::tabs.item
        :active="$activeTab === 'tab1'"
        wire:click="$set('activeTab', 'tab1')"
    >
        Tab 1
    </x-filament::tabs.item>

    <x-filament::tabs.item
        :active="$activeTab === 'tab2'"
        wire:click="$set('activeTab', 'tab2')"
    >
        Tab 2
    </x-filament::tabs.item>

    <x-filament::tabs.item
        :active="$activeTab === 'tab3'"
        wire:click="$set('activeTab', 'tab3')"
    >
        Tab 3
    </x-filament::tabs.item>
</x-filament::tabs>
<x-filament::tabs>
    <x-filament::tabs.item
        :active="$activeTab === 'tab1'"
        wire:click="$set('activeTab', 'tab1')"
    >
        Tab 1
    </x-filament::tabs.item>

    <x-filament::tabs.item
        :active="$activeTab === 'tab2'"
        wire:click="$set('activeTab', 'tab2')"
    >
        Tab 2
    </x-filament::tabs.item>

    <x-filament::tabs.item
        :active="$activeTab === 'tab3'"
        wire:click="$set('activeTab', 'tab3')"
    >
        Tab 3
    </x-filament::tabs.item>
</x-filament::tabs>
Matthew
MatthewOP•2y ago
Matthew
MatthewOP•2y ago
(Its a custom Dashboard. Not the default that comes with FIlament)
Patrick Boivin
Patrick Boivin•2y ago
Not sure... what if you remove the :active="..." on all tabs. What do you get?
Matthew
MatthewOP•2y ago
Ah, I just cleared the views and its ok now! Also, how can I show different data on each tab? I cant find that info on the docs
Patrick Boivin
Patrick Boivin•2y ago
Yeah the docs are focused on the Tabs part, not the content. 1 sec You know which tab is active with $activeTab, so you can display some <div> under the tabs and show the one for the active tab.

Did you find this page helpful?