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

coverage_amount

inside the

PolicyPreview

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

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

Jump to solution

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

coverage_amount

coverage_amount

inside the

PolicyPreview

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

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

Jump to solution

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

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

Similar Threads

Similar Threads

Similar Threads