F
Filament•4d ago
czehnter

How to make data in Livewire component reactive?

Hi, I have a Livewire component inside my form where I'm passing values for width and height like this: 
Livewire::make(WindowPreview::class, fn(Get $get) = ['width' => $get('width'),
'height' => $get('height')])
Livewire::make(WindowPreview::class, fn(Get $get) = ['width' => $get('width'),
'height' => $get('height')])
In the component class I define the variables like this: 
#[Reactive]
public ?int $width;
public ?int $height;
#[Reactive]
public ?int $width;
public ?int $height;
and then I can use {{ $width }} in the blade view. However, the data does not seem to be reactive this way. If I change the values in the form fields, they are not getting updated in the Livewire component. Both text fields in the form are ->live() of course. What can I do to make the values reactive?
Solution:
```php Section::make('Details') ->columnSpan(3) ->dehydrated(false) ->live()...
Jump to solution
8 Replies
toeknee
toeknee•4d ago
I think this is similare to how the ViewField works. I had to put them schema in a closure that then wrapped around which allows it to be re-run
czehnter
czehnterOP•4d ago
Could you give an example? I didn't use the ViewField because I thought you can't use closures for dynamic data inside of ->viewData().
Solution
toeknee
toeknee•4d ago
 Section::make('Details')
    ->columnSpan(3)
    ->dehydrated(false)
    ->live()
    ->schema(fn ($get) => [
        ViewField::make('member_details')
            ->label('Member Details')
            ->columnSpan(3)
            ->view('filament.forms.fields.member-details',
                ['record' => User::withoutGlobalScopes(['active'])->find($get('user_id'))]
            ),
    ]),
 Section::make('Details')
    ->columnSpan(3)
    ->dehydrated(false)
    ->live()
    ->schema(fn ($get) => [
        ViewField::make('member_details')
            ->label('Member Details')
            ->columnSpan(3)
            ->view('filament.forms.fields.member-details',
                ['record' => User::withoutGlobalScopes(['active'])->find($get('user_id'))]
            ),
    ]),
toeknee
toeknee•4d ago
I use the above, as the section has a schema and wrapped in a function, we can pass the data in that way
czehnter
czehnterOP•4d ago
Can you simply use {{ $record }} in your view without any further configuration this way?
toeknee
toeknee•4d ago
I believe so But I don't think the record updates with the form values until saved.
czehnter
czehnterOP•4d ago
Thanks, it works this way! I decided to wrap it in a Group since I don't need a Section there. This has to be a hack though right?
toeknee
toeknee•4d ago
which is why $get is usually used Yep absolutely

Did you find this page helpful?