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•17mo ago

Looks like your $activeTab variable is undefined Not sure of the context but maybe $this->activeTab, in a Livewire component?

MatthewOP•17mo ago

This is taken straight from the docs.

MatthewOP•17mo ago

MatthewOP•17mo ago

https://filamentphp.com/docs/3.x/support/blade-components/tabs

Tabs Blade component - Core Concepts - Filament

MatthewOP•17mo ago

Could something be wrong with the docs?

Patrick Boivin•17mo 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'"
    >

MatthewOP•17mo ago

Yah, I am

Solution

Patrick Boivin•17mo ago

Ok, so do you have a public string $activeTab property on your Livewire component?

MatthewOP•17mo ago

I dont

Patrick Boivin•17mo ago

Add it, then use $this->activeTab instead in your Blade view

MatthewOP•17mo 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>

MatthewOP•17mo ago

MatthewOP•17mo ago

(Its a custom Dashboard. Not the default that comes with FIlament)

Patrick Boivin•17mo ago

Not sure... what if you remove the :active="..." on all tabs. What do you get?

MatthewOP•17mo 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•17mo 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.

Gaming

Programming

Undefined variable $activeTab