I previously had this:
<div wire:loading wire:target="date_range"></div>
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?
wire:loading wire:target="date_range" now doesn’t work anymore and I couldn’t find in the docs how to trigger the loading state only when a value is updated.
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.