Filament•10mo ago

unable to call method

I am new to filament, and got assigned to a project to make a custom field for searching location through google maps api. I am getting a little stick here. I'm using

$wire.newLocations($event.target.value)

$wire.newLocations($event.target.value)

to try and call a method in my component class (GeoMap), but keep getting this error Unable to call component method. Public method [newLocations] not found on component. When I post this method in my CreateLocation class it does work however. What is the reason for this, and how can I fix this?

// GeoMap.php
class GeoMap extends Field
{
    use HasExtraAlpineAttributes;

    protected string $view = 'forms.components.geo-map';

    protected float | Closure $lat = 0;

    protected float | Closure $lon = 0;


    public function getMapsUrl(): string
    {
        return MapsHelper::getMapUrl();
    }

    public function newLocations($address): array
    {
        return MapsHelper::getLocations($address);
    }
}

// GeoMap.php
class GeoMap extends Field
{
    use HasExtraAlpineAttributes;

    protected string $view = 'forms.components.geo-map';

    protected float | Closure $lat = 0;

    protected float | Closure $lon = 0;


    public function getMapsUrl(): string
    {
        return MapsHelper::getMapUrl();
    }

    public function newLocations($address): array
    {
        return MapsHelper::getLocations($address);
    }
}

2 Replies

kianOP•10mo ago

// geo-map.blade.php
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }"
    >
        <script defer>
            function loadAddresses($addresses) {
                console.log($addresses);
            }
        </script>
        <x-filament::input.wrapper
            :valid="! $errors->has($statePath)"
            :attributes="
            \Filament\Support\prepare_inherited_attributes($getExtraAttributeBag())
                ->class(['fi-fo-geo-map'])"
        >
            <x-filament::input
                x-on:keyup.debounce.400ms="async () => {
                    let addresses = await $wire.newLocations($event.target.value);
                    loadAddresses(addresses);
                }"
                :attributes="
                    \Filament\Support\prepare_inherited_attributes($getExtraAttributeBag())
                        ->class(['fi-fo-geo-map-text-input'])
                        ->merge([
                            'required' => true,
                            'placeholder' => 'Enter location'
                        ])"
            />
        </x-filament::input.wrapper>
    </div>
</x-dynamic-component>

// geo-map.blade.php
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }"
    >
        <script defer>
            function loadAddresses($addresses) {
                console.log($addresses);
            }
        </script>
        <x-filament::input.wrapper
            :valid="! $errors->has($statePath)"
            :attributes="
            \Filament\Support\prepare_inherited_attributes($getExtraAttributeBag())
                ->class(['fi-fo-geo-map'])"
        >
            <x-filament::input
                x-on:keyup.debounce.400ms="async () => {
                    let addresses = await $wire.newLocations($event.target.value);
                    loadAddresses(addresses);
                }"
                :attributes="
                    \Filament\Support\prepare_inherited_attributes($getExtraAttributeBag())
                        ->class(['fi-fo-geo-map-text-input'])
                        ->merge([
                            'required' => true,
                            'placeholder' => 'Enter location'
                        ])"
            />
        </x-filament::input.wrapper>
    </div>
</x-dynamic-component>

It seems like $wire is just not getting to the right file?

Saade•10mo ago

Form fields are not Livewire components. That's why $wire points to the page (because the page is a Livewire component, not the field). You'll need to dispatch an event to your field. See how its done: https://github.com/search?q=repo%3Asaade%2Ffilament-adjacency-list%20builder%3A%3Asort&type=code

Gaming

Programming

unable to call method