How to add a method to a custom component?

Currently I am getting this error:

Unable to call component method. Public method [saveCarState] not found on component

Unable to call component method. Public method [saveCarState] not found on component

when I try to run a custom method called saveCarState when clicking on a button like:

<button wire:click="saveCarState">....

<button wire:click="saveCarState">....

I have followed this: https://filamentphp.com/docs/3.x/forms/fields/custom and created the custom component files (component class file and blade view class) via this command:

php artisan make:form-field CarStateSelector

php artisan make:form-field CarStateSelector

I can do the blade view and create bells and whistles. But, in this custom component, I would like to bypass the form actions Save, Cancel, etc. and trigger my own Livewire functions. So, I added `wire:click="saveCarState" on one of my buttons. And I expect that when the user clicks on this button the function saveCarState in the file (that was created by the artisan command):

app/Forms/Components/CarStateSelector.php

app/Forms/Components/CarStateSelector.php

will be triggered. So, I added it there like:

<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Field;

class CarStateSelector extends Field
{
    protected string $view = 'forms.components.car-state-selector';

    public function saveCarState()
    {
        dd('hello from save');
    }
}

<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Field;

class CarStateSelector extends Field
{
    protected string $view = 'forms.components.car-state-selector';

    public function saveCarState()
    {
        dd('hello from save');
    }
}

But I am getting the error message as I said in the beginning. How can I use Livewire method in my custom component? Clearly I am doing something wrong here 😭

Custom fields - Form Builder - Filament

Solution:

saveCarState method should exist in the CreatePage, EditPage, if you are using the panel builder, or in the LW component if you are using a custom LW component.

Jump to solution

5 Replies

WirkhofOP•9mo ago

Is this class file the correct file to put my custom functions in?

toeknee•9mo ago

you would need the function public function saveCarState() { } on the component

WirkhofOP•9mo ago

I already have it look:

namespace App\Forms\Components;

use Filament\Forms\Components\Field;

class CarStateSelector extends Field
{
    protected string $view = 'forms.components.car-state-selector';

    public function saveCarState() // <--- here is my function
    {
        dd('hello from save');
    }
}

namespace App\Forms\Components;

use Filament\Forms\Components\Field;

class CarStateSelector extends Field
{
    protected string $view = 'forms.components.car-state-selector';

    public function saveCarState() // <--- here is my function
    {
        dd('hello from save');
    }
}

I don't have any other files. Just the 2 Laravel command created.

Solution

LeandroFerreira•9mo ago

saveCarState method should exist in the CreatePage, EditPage, if you are using the panel builder, or in the LW component if you are using a custom LW component.

WirkhofOP•9mo ago

Thanks! It works.

Gaming

Programming

How to add a method to a custom component?