yelloalejo Posts - Answer Overflow

yelloalejo

Posts Comments

FFilament

•Created by yelloalejo on 10/25/2024 in #❓┊help

how can i encrypt update payload

3 replies

FFilament

•Created by yelloalejo on 6/27/2024 in #❓┊help

How to Execute a Function on Button Click and Component Render in Custom Filament Fields?

Hi, I am creating custom fields and want to include a button that, when clicked, executes a function in my component. The function, sendOtp, queries the database and calls services, etc. Additionally, I want to call this function when the component is rendered for the first time. Here is my base code: Component:

<?php

namespace App\Forms\Components\Fields;

use Filament\Forms\Components\Field;

class AuthField extends Field
{
    protected string $view = 'forms.components.fields.auth-field';

    public function sendOtp(): void
    {
        // send otp logic
        ray('send otp');
    }
}

<?php

namespace App\Forms\Components\Fields;

use Filament\Forms\Components\Field;

class AuthField extends Field
{
    protected string $view = 'forms.components.fields.auth-field';

    public function sendOtp(): void
    {
        // send otp logic
        ray('send otp');
    }
}

Blade:

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div
        x-data="{
            state: $wire.$entangle('{{ $getStatePath() }}'),
         }"
        x-init="sendOtp"
    >
        <input x-model="state" type="text" maxlength="6" minlength="6" placeholder="000000">

        <button type="button">
            Send OTP
        </button>
    </div>
</x-dynamic-component>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div
        x-data="{
            state: $wire.$entangle('{{ $getStatePath() }}'),
         }"
        x-init="sendOtp"
    >
        <input x-model="state" type="text" maxlength="6" minlength="6" placeholder="000000">

        <button type="button">
            Send OTP
        </button>
    </div>
</x-dynamic-component>

How can I make the button execute the sendOtp function on click, and also call this function when the component is rendered for the first time?

5 replies

Gaming

Programming