Filament•3mo ago

Calling a Method Inside a Field Class in Filament v3 from JS

I've implemented a JavaScript function to add a new item to an array of coordinates. When clicking the button, I'm calling @this.call('add'), but it doesn't seem to find the add method in the Form class, even though the method exists inside the Field. How can I use the add method that is defined within the Field class?

class TestForm extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                MapBoxField::make('test')
                    ->isReverse()
                    ->driving()
                    ->live()
                    ->coordinates([
                        [-30.008093, -51.165544],
                        [-30.008489, -51.164081],
                        [-30.008430, -51.162708],
                        [-30.008430, -51.162708],
                        [-30.008430, -51.162708],
                        [-30.009301, -51.164950],
                        [-30.009677, -51.166985],
                    ])
            ]);
    }

    public function render(): View
    {
        return view('livewire.test-form');
    }
}

class TestForm extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                MapBoxField::make('test')
                    ->isReverse()
                    ->driving()
                    ->live()
                    ->coordinates([
                        [-30.008093, -51.165544],
                        [-30.008489, -51.164081],
                        [-30.008430, -51.162708],
                        [-30.008430, -51.162708],
                        [-30.008430, -51.162708],
                        [-30.009301, -51.164950],
                        [-30.009677, -51.166985],
                    ])
            ]);
    }

    public function render(): View
    {
        return view('livewire.test-form');
    }
}

class MapBoxField extends Field
{
    protected string $view = 'forms.components.map-direction-field';

    public array $coordinates;

    protected int $limitPerRequest = 25;

    protected string $type = 'driving';

    protected array $layers;

    protected bool $reverse = false;

    protected string $mode = 'normal';

    public function add()
    {
        dd('stop');
    }
}

class MapBoxField extends Field
{
    protected string $view = 'forms.components.map-direction-field';

    public array $coordinates;

    protected int $limitPerRequest = 25;

    protected string $type = 'driving';

    protected array $layers;

    protected bool $reverse = false;

    protected string $mode = 'normal';

    public function add()
    {
        dd('stop');
    }
}

map.on('click', function(e) {
    const lat = e.lngLat.lat;
    const lng = e.lngLat.lng;

    @this.call('add');
}

map.on('click', function(e) {
    const lat = e.lngLat.lat;
    const lng = e.lngLat.lng;

    @this.call('add');
}

1 Reply

Dennis Koch•3mo ago

You can't call methods on fields from JS. They aren't Livewire components.

Gaming

Programming

Calling a Method Inside a Field Class in Filament v3 from JS