Filament•16mo ago

Forms, Modals, ViewField and $livewire

Appears I can easily use $livewire in an ->afterStateUpdated to set something like $livewire->criteria = Criteria::find($state);, which then i can acccess from my ViewField with $this->criteria. But as soon as I try that same form in a modal, its no longer available. I need this form with a ViewField to work in both a standalone livewire component and a action modal. Ive set public $criteria on the livewire component, but assuming because if the modal, its not available. Suggestions?

29 Replies

Patrick Boivin•16mo ago

Haven't tested on v3, but maybe something like this

->afterStateUpdated(function ($component) {
    $livewire = $component->getLivewire();
    
    // ...
})

->afterStateUpdated(function ($component) {
    $livewire = $component->getLivewire();
    
    // ...
})

Oh sorry, if the issue is from within the ViewField, maybe $getLivewire() in the Blade view?

Mark ChaneyOP•16mo ago

well that does ive me the parent livewire component, but $criteria doesnt seem to get set on it. Its still null. $getLivewire() on the blade view that is

Patrick Boivin•16mo ago

Are you sure the state gets updated before the Blade view is rendered?

Mark ChaneyOP•16mo ago

I mean, its a livewire property, so as that property is updated, the blade is rerendered. Everything works perfectly in a regular form, just not when that form is in a modal

awcodes•16mo ago

I think you'll need to pass it to the action as $arguments or moutUsing(). not 100% sure though

Mark ChaneyOP•16mo ago

but its all within the form. I have a select and when an option is picked, the viewfield is updated updated with a preview of that that that data basically it gives you a better idea of what record you have selected before actually saving the form so really has nothing to do with the action at this point

awcodes•16mo ago

well it has something to do with the action considering it is launching the modal 🙂 and it's not working in the modal

Mark ChaneyOP•16mo ago

yes, an Action is launching the modal of course, but the ViewField is entirely based on what is selected in the modal and is viewed in that modal and part of that form. Not related to anything that happens before that.

awcodes•16mo ago

guess i would need to see the code. sorry.

Mark ChaneyOP•16mo ago

@awcodes just something simple like

Select::make('criteria_id')
    ->reactive()
    ->afterStateUpdated(function ($state, $livewire) {
        $livewire->criteria = Criteria::find($state);
    }),
View::make('livewire.criteria-preview'),

// livewire.criteria-preview
{{ $this->criteria->foo }}
{{ $this->criteria->bar }}

Select::make('criteria_id')
    ->reactive()
    ->afterStateUpdated(function ($state, $livewire) {
        $livewire->criteria = Criteria::find($state);
    }),
View::make('livewire.criteria-preview'),

// livewire.criteria-preview
{{ $this->criteria->foo }}
{{ $this->criteria->bar }}

ive tried both a ViewField and a view

awcodes•16mo ago

i'm surprised this is working in the page, to be honest the criteria isn't getting passed to the view livewire component at all so it shouldn't be able to mount it

Patrick Boivin•16mo ago

@Mark Chaney What if you instead reach for criteria_id from the view, and then perform the query?

Mark ChaneyOP•16mo ago

the livewire component has public $criteria and $livewire->criteria is updating that @pboivin i thought about htat, but that just seems wrong

awcodes•16mo ago

right but the $livewire on the page is different from $livewire in a modal

Mark ChaneyOP•16mo ago

dont think i should be doing a query directly from the blade file

awcodes•16mo ago

modal is it's own livewire component

Mark ChaneyOP•16mo ago

right, but you were talking about why you were surprised it worked on a page

Patrick Boivin•16mo ago

I understand, not my first choice either but sometimes it can simplify things.

Mark ChaneyOP•16mo ago

i really wish ViewData had closure support so i could just do ->viewData(fn($livewire) => ['criteria' => $livewire->criteria]) or somethign like that

awcodes•16mo ago

I'm surprised because the View::make() is rendering a livewire component correct and $livewire in afterstate updated is the page component. So, how is the View even mounting with it as a property. Might be working because it's nested, not sure.

Mark ChaneyOP•16mo ago

so either way, how can i pass a model or collection to a View or ViewField from afterStateUpdated()?

Patrick Boivin•16mo ago

If you can reach from the view to the page component, can you call a method on it and encapsulate the query there? (get criteria_id from $this->data, then query and return the result)

Mark ChaneyOP•16mo ago

hmm, tried the following in the view blade

    @php
        $criteria_id = $evaluate(fn ($get) => $get('criteria_id'));
        ray($criteria_id)->orange()->label('criteria from evaluate $get()');
        $criteria = $this->criteria ?? ($this->getCriteria($criteria_id) ?? null);
        ray('rerendering view blade')->orange();
        ray($criteria)->orange()->label('criteria');
    @endphp

    @php
        $criteria_id = $evaluate(fn ($get) => $get('criteria_id'));
        ray($criteria_id)->orange()->label('criteria from evaluate $get()');
        $criteria = $this->criteria ?? ($this->getCriteria($criteria_id) ?? null);
        ray('rerendering view blade')->orange();
        ray($criteria)->orange()->label('criteria');
    @endphp

.. but $criteria_id is null when in the modal. Gets the value just fine when doing the form on a regular page. grr. i hate these type of time sucks

Patrick Boivin•16mo ago

Ok, just as a sanity check, from the Blade view, can you try @dd($this)? Does it give you the Livewire instance or the ViewField?

Mark ChaneyOP•16mo ago

its the parent livewire page. Same with $livewire or $getLivewire()

Patrick Boivin•16mo ago

Ok. I'm not sure what to suggest honestly 😔 Does criteria_id belong to a form in the page or in the modal?

Mark ChaneyOP•16mo ago

its the select field within the form on the modal i think i might be getting somewhere

Patrick Boivin•16mo ago

Oh, so possibly this call to $evaluate() runs in the context of the page component? I'm getting echos of another chat we had, where we had to reach into $this->mountedActionsData. Does that make sense?

Mark ChaneyOP•16mo ago

yes, that was a bit different. I did look at that conversation first well i have it working. Original method of

->afterStateUpdated(function ($state, $livewire) {
    $livewire->criteria = Criteria::find($state);
})

->afterStateUpdated(function ($state, $livewire) {
    $livewire->criteria = Criteria::find($state);
})

is now working for both on page and modal. what the heck. lol

Gaming

Programming

Forms, Modals, ViewField and $livewire