我以前有过这个：
<div wire:loading wire:target="date_range"></div>
其中date_range由一个选择元素上的同一个livewire组件中的wire： model定义。
由于我的应用程序结构，我现在通过AlpineJS更新select元素上的date\u range值，这是在livewire组件之外完成的：
x-model="date_range" x-on:change="window.livewire.emit('dateRangeChanged', date_range)"
然后在Livewire组件中使用事件侦听器。这一切都按预期工作，但现在的问题是，我想显示前面提到的元素的加载状态，只有当通过全局JS事件更新date\u range值时。这可能吗？
我能想到的唯一奇怪的方法是livewire组件中的listener方法执行类似于$this的操作-
如果这是Vue.js您完全可以这样做，即在开始长时间运行的任务之前将加载属性设置为true，并在完成后将其切换回false。不幸的是，由于Livewire在服务器上运行，所以一切都是同步的，所以当请求返回时，任务已经完成。
我最终做的是到达阿尔卑斯山。又是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
}
}))
