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

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

1 голос
/ 17 июня 2020

Раньше у меня было это: 

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

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

Из-за структуры моего приложения я теперь обновите значение date_range в элементе select с помощью Alpine JS вот так, и это делается вне компонента 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 в конце метода рендеринга, но это не так. Я чувствую себя хорошо.

1 Ответ

0 голосов
/ 20 августа 2020

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

То, что я закончил, - это снова обратиться к Alpine. js. Добавьте следующее к root вашего компонента 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
    }
}))
...