Question

我以前有这个：

App registrations

其中<div wire:loading wire:target="date_range"></div>由date_range在select元素的同一带电部件中定义。

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

date_range

然后我在Livewire组件中使用事件侦听器。所有这些都按预期工作，但是现在的问题是，当通过全局JS事件更新x-model="date_range" x-on:change="window.livewire.emit('dateRangeChanged', date_range)"值时，我想显示前面提到的元素的加载状态，仅。这可能吗？

我想出的唯一办法是，livewire组件中的listener方法执行类似date_range的操作，并在render方法的末尾将其设置为false，但这感觉不对。 / p>

Answer 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
    }
}))

从组件外部发出事件时使用wire：target

1 个答案: