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');
}
