Filament•2mo ago

Livewire Component Not Working

Hello, I add a livewire component consisting on a select of options. When the select changes, nothing happens (can't see a network request on devtools). This is the livewire component:

<?php

namespace App\Livewire;

use App\Models\Agency;
use Livewire\Component;

class SelectAgency extends Component
{
    public $selectedOption;

    public $options = [];

    public function mount()
    {
        $this->selectedOption = session('agency.id');
        $this->fetchOptions();
    }

    public function fetchOptions()
    {
        $this->options = Agency::where('status_id', 3)->pluck('name', 'id')->toArray();
    }

    public function updatedSelectedOption($value)
    {
        session(['agency.id' => $value]);
    }

    public function render()
    {
        return view('livewire.select-agency');
    }
}

<?php

namespace App\Livewire;

use App\Models\Agency;
use Livewire\Component;

class SelectAgency extends Component
{
    public $selectedOption;

    public $options = [];

    public function mount()
    {
        $this->selectedOption = session('agency.id');
        $this->fetchOptions();
    }

    public function fetchOptions()
    {
        $this->options = Agency::where('status_id', 3)->pluck('name', 'id')->toArray();
    }

    public function updatedSelectedOption($value)
    {
        session(['agency.id' => $value]);
    }

    public function render()
    {
        return view('livewire.select-agency');
    }
}

The component renders fine, but on change nothing happens.

3 Replies

AmauryCid•2mo ago

This is the blade code:

<div>
    <div
        class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&amp;:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&amp;:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&amp;:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-select">
        <select wire:model="selectedOption"
            class="fi-select-input block w-full border-none bg-transparent py-1.5 pe-8 text-base text-gray-950 transition duration-75 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] dark:text-white dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] sm:text-sm sm:leading-6 [&amp;_optgroup]:bg-white [&amp;_optgroup]:dark:bg-gray-900 [&amp;_option]:bg-white [&amp;_option]:dark:bg-gray-900 ps-3">
            <option value="">Select Agency...</option>
            @foreach ($options as $value => $label)
                <option value="{{ $value }}">{{ $label }}</option>
            @endforeach
        </select>
    </div>
</div>

<div>
    <div
        class="fi-input-wrp flex rounded-lg shadow-sm ring-1 transition duration-75 bg-white dark:bg-white/5 [&amp;:not(:has(.fi-ac-action:focus))]:focus-within:ring-2 ring-gray-950/10 dark:ring-white/20 [&amp;:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-600 dark:[&amp;:not(:has(.fi-ac-action:focus))]:focus-within:ring-primary-500 fi-fo-select">
        <select wire:model="selectedOption"
            class="fi-select-input block w-full border-none bg-transparent py-1.5 pe-8 text-base text-gray-950 transition duration-75 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] dark:text-white dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] sm:text-sm sm:leading-6 [&amp;_optgroup]:bg-white [&amp;_optgroup]:dark:bg-gray-900 [&amp;_option]:bg-white [&amp;_option]:dark:bg-gray-900 ps-3">
            <option value="">Select Agency...</option>
            @foreach ($options as $value => $label)
                <option value="{{ $value }}">{{ $label }}</option>
            @endforeach
        </select>
    </div>
</div>

And this is how I included:

        FilamentView::registerRenderHook(
            PanelsRenderHook::USER_MENU_BEFORE,
            fn (): string => Blade::render('@livewire(\'select-agency\')'),
        );

        FilamentView::registerRenderHook(
            PanelsRenderHook::USER_MENU_BEFORE,
            fn (): string => Blade::render('@livewire(\'select-agency\')'),
        );

What I'm trying to do here is a global filter on the top navbar. I'm trying to achieve that after a selection, a session variable is setted and trigger a filament component refresh (resource, page). models already have a scope that checks this session variable to query the results.

LeandroFerreira•2mo ago

shouldn't you use wire:model.live ?

AmauryCid•2mo ago

That did it! Thank you Leandro! 🙂

Gaming

Programming

Livewire Component Not Working