2

我以前有这个：

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

where是在 select 元素上的同一个 livewire 组件date_range中定义的。wire:model

由于我的应用程序结构，我现在date_range像这样通过 AlpineJS 更新选择元素上的值，这是在 livewire 组件之外完成的：

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

然后我在我的 Livewire 组件中使用一个事件监听器。这一切都按预期工作，但现在的问题是我想显示之前提到的元素的加载状态，只有在date_range通过全局 JS 事件更新值时。这可能吗？

我能想出的唯一 hacky 方法是 livewire 组件中的 listener 方法做了类似的事情，$this->date_range_is_loading = true并在 render 方法的末尾将其设置为 false，但这感觉不对。

4

1 回答 1

1

如果这是 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
    }
}))
于 2020-08-19T22:27:05.377 回答