Filament•7mo ago

Using $get / $set with a Livewire::make() form component

I am desperately trying to create a modal with a select component that, when changed, can display some calculated things in the modal based on the selected amount. This works to pass the default state of amount from coverage_amount, but amount doesn't change when the select field changes. How can I access the current state of coverage_amount inside the PolicyPreview livewire component?

->form([
    Select::make('coverage_amount')
        ->label('Amount')
        ->options(fn (CourtCase $case) => $case->getCoverageOptions())
        ->default(fn (CourtCase $case) => $case->firmRequestedDefaultCoverage())
        ->placeholder('Select coverage amount')
        ->live(),
    Livewire::make(PolicyPreview::class)
        ->data(fn (Get $get) => [
            'amount' => $get('coverage_amount'),
        ]),
])

->form([
    Select::make('coverage_amount')
        ->label('Amount')
        ->options(fn (CourtCase $case) => $case->getCoverageOptions())
        ->default(fn (CourtCase $case) => $case->firmRequestedDefaultCoverage())
        ->placeholder('Select coverage amount')
        ->live(),
    Livewire::make(PolicyPreview::class)
        ->data(fn (Get $get) => [
            'amount' => $get('coverage_amount'),
        ]),
])

Solution:

You could use a ViewField ```php ViewField::make('amount') ->view('policy-preview')...

Jump to solution

4 Replies

BKF Dev•7mo ago

Try to use Livewire $livewire instead of Get $get

APGOP•7mo ago

Thanks @BKF Dev - I really apprecaite your help. I tried that but I run in to this:

App\Filament\Widgets\ActiveCasesTable::App\Filament\Widgets\{closure}(): Argument #1 ($livewire) must be of type Filament\Forms\Components\Livewire, App\Filament\Widgets\ActiveCasesTable given

App\Filament\Widgets\ActiveCasesTable::App\Filament\Widgets\{closure}(): Argument #1 ($livewire) must be of type Filament\Forms\Components\Livewire, App\Filament\Widgets\ActiveCasesTable given

The table where I'm trying to attach this action is from within a widget on my panel dashboard (ActiveCasesTable)

Action::make('Test')
    ->form([
        Select::make('coverage_amount')
            ->label('Amount')
            ->options(fn (CourtCase $case) => $case->getCoverageOptions())
            ->default(fn (CourtCase $case) => $case->firmRequestedDefaultCoverage())
            ->placeholder('Select coverage amount')
            ->live(),
        Livewire::make(PolicyPreview::class)
            ->data(fn (Livewire $livewire) => [
                'amount' => $livewire->get('coverage_amount'),
            ]),
    ])
    ->action(function (CourtCase $case, $data) {
        dd($data);
    }),

Action::make('Test')
    ->form([
        Select::make('coverage_amount')
            ->label('Amount')
            ->options(fn (CourtCase $case) => $case->getCoverageOptions())
            ->default(fn (CourtCase $case) => $case->firmRequestedDefaultCoverage())
            ->placeholder('Select coverage amount')
            ->live(),
        Livewire::make(PolicyPreview::class)
            ->data(fn (Livewire $livewire) => [
                'amount' => $livewire->get('coverage_amount'),
            ]),
    ])
    ->action(function (CourtCase $case, $data) {
        dd($data);
    }),

At the end of the day, I'm trying to create a modal with a select field (for an amount) and then show associated fees in the modal before the user clicks save. Maybe I'm going about this all wrong. I've tried using custom modal content (and custom modal footer content) with alpine + a select field and I'm able to obviously make that reactive and update fees when the select is changed, but I couldn't find out how to pass that as the $data when the modal was submitted.. I also tried to do everything in a Livewire::make() component - but again, I don't have anything in the ->action() method .. $data is always an empty array.

Solution

LeandroFerreira•7mo ago

You could use a ViewField

ViewField::make('amount')
->view('policy-preview')

ViewField::make('amount')
->view('policy-preview')

<!-- resources/views/policy-preview.blade.php -->
<div>
    {{ $getState() }}
</div>

<!-- resources/views/policy-preview.blade.php -->
<div>
    {{ $getState() }}
</div>

And use afterStateUpdated in the select to set the value

->afterStateUpdated(function (Set $set, ?string $state) {
    $set('amount', $state);
})

->afterStateUpdated(function (Set $set, ?string $state) {
    $set('amount', $state);
})

APGOP•7mo ago

Fannntastic! This works - and it's exactly what I needed. I can't thank you enough!

Gaming

Programming

Using $get / $set with a Livewire::make() form component