Использование wire: target при отправке события извне компонента

У меня раньше было это:

<div wire:loading wire:target="date_range"></div>

где date_range был определен wire:model в том же компоненте livewire в элементе select.

Из-за структуры моего приложения я теперь обновляю значение date_range в элементе select через AlpineJS следующим образом, и это делается вне компонента livewire:

x-model="date_range" x-on:change="window.livewire.emit('dateRangeChanged', date_range)"

Затем я использую прослушиватель событий в моем компоненте Livewire. Все это работает, как ожидалось, но теперь проблема в том, что я хочу показать состояние загрузки элемента, упомянутого ранее, только, когда значение date_range обновляется через глобальное событие JS. Это возможно?

Единственный хакерский способ, который я мог придумать, - это то, что метод слушателя в компоненте livewire делает что-то вроде $this->date_range_is_loading = true и устанавливает для него значение false в конце метода рендеринга, но это кажется неправильным.


laravel laravel-livewire
person eskimo    schedule 17.06.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если бы это был Vue.js, вы могли бы сделать именно это, то есть установить для свойства loading значение true перед началом длительной задачи и переключить его обратно на false после того, как она будет выполнена. К сожалению, поскольку Livewire работает на сервере, все происходит синхронно, поэтому к моменту возврата запроса задача уже будет завершена.

В итоге я снова обратился к Alpine.js. Добавьте в корень компонента Alpine следующее:

x-data="{ date_range_is_loading: false }"
x-init="
    const alpine = this;
    document.addEventListener('livewire:load', () => {
        window.livewire.on('dateRangeChanged', () => alpine.date_range_is_loading = true);
    });
"

Если вы хотите прослушивать отправку действия Livewire, вы можете добавить прослушиватель для ловушки messageSent.

window.livewire.hook('messageSent', (_, message) => message.actionQueue.forEach(a => {
    if (a.type == 'callMethod' && a.payload.method == 'myAction') {
        alpine.date_range_is_loading = true; // Or whatever you need to do
    }
}))
person Avraham Appel    schedule 19.08.2020