Filament•4mo ago

Tabs Blade component, active state in foreach

I'm not super versed in alpine but I am struggling to figure out why the :active property wouldn't be working here. The tabs show up fine with correct labels and switch properly - but it appears all the tabs are all showing in the active state. I've tried a quite a few variations and haven't been able to get any of them to work properly.

<!-- Blade Page -->

<x-filament-panels::page>
  @php
    $entries = \App\Models\Model::all();
  @endphp
  
  <div x-data="{ tab: 'tab1' }">
      <x-filament::tabs>
          @foreach ($entries as $index => $entry)
              @php
                  $tabId = 'tab' . ($index + 1);
              @endphp
              <x-filament::tabs.item @click="tab = '{{ $tabId }}'" :active="'tab === {{ $tabId }}'" >
                  {{ $tabId }} Report
              </x-filament::tabs.item>
          @endforeach
      </x-filament::tabs>
  
      {{-- Tab Data Here --}}
  
  </div>
</x-filament-panels::page>

<!-- Blade Page -->

<x-filament-panels::page>
  @php
    $entries = \App\Models\Model::all();
  @endphp
  
  <div x-data="{ tab: 'tab1' }">
      <x-filament::tabs>
          @foreach ($entries as $index => $entry)
              @php
                  $tabId = 'tab' . ($index + 1);
              @endphp
              <x-filament::tabs.item @click="tab = '{{ $tabId }}'" :active="'tab === {{ $tabId }}'" >
                  {{ $tabId }} Report
              </x-filament::tabs.item>
          @endforeach
      </x-filament::tabs>
  
      {{-- Tab Data Here --}}
  
  </div>
</x-filament-panels::page>

1 Reply

bilalel•3mo ago

same probleme here have you found a solution?

Gaming

Programming

Tabs Blade component, active state in foreach