Using wire:target when emitting an event from outside the component

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? 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.

3 Likes