I previously had this:
<div wire:loading wire:target="date_range"></div>
where date_range
was defined by wire:model
in the same livewire component on a select element.
Because of my app structure, I now update the date_range
value on a select element through AlpineJS like so, and this is done outside of the livewire component:
x-model="date_range" x-on:change="window.livewire.emit('dateRangeChanged', date_range)"
I then use an event listener in my Livewire component. This all works as expected, but the problem now is that I want to show the loading state of the element mentioned before, only when the date_range
value is being updated through the global JS event. Is this possible?
The only hacky way I could come up with is that the listener method in the livewire component does something like $this->date_range_is_loading = true
and set it to false at the end of the render method but that doesn’t feel right.