Laravel Livewire：监听器调用方法时wire:loading不生效问题求助

架构老林

2026-7-30

Livewire 监听器触发方法时加载图标不显示的解决办法

问题情况

组件1（菜单）通过$emit触发组件2（图片库）的getMedia方法时，组件2里的<div wire:loading wire:target="getMedia">loading</div>完全没反应；但直接在组件2内部点击按钮调用getMedia，加载图标就能正常显示。

可行解决方案

1. 手动控制加载状态

给图片库组件加个isLoading属性，触发方法时手动切换状态：

// 图片库组件类代码
protected $listeners = ['showGallery' => 'getMedia'];
public $isLoading = false;

public function getMedia($filter) {
    $this->isLoading = true;
    // 执行查询逻辑
    $this->media = Media::query()->where('filter', $filter)->get();
    $this->isLoading = false;
}

视图里直接判断这个属性：

{{-- 加载状态显示 --}}
<div wire:if="isLoading">loading</div>

{{-- 媒体内容区域 --}}
<div wire:loading.remove wire:if="!isLoading">
    @dump($media)
</div>

2. 监听整个组件的加载状态

把wire:target改成监听组件本身，不管触发来源是什么，只要组件有请求就显示加载：

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

3. 用Livewire 3的加载状态API（适配新版本）

如果用的是Livewire 3，直接用内置的加载状态控制：
组件1里换成dispatch语法：

<button wire:click="$dispatch('showGallery', {filter: 'all'})">Show All</button>

组件2里用loading()包裹逻辑：

public function getMedia($filter) {
    $this->loading()->call(function() use ($filter) {
        $this->media = Media::query()->where('filter', $filter)->get();
    });
}

视图里保留原来的wire:loading wire:target="getMedia"就能正常触发。