Livewire渲染/更新时元素隐藏异常：wire:loading.remove失效问题

你的问题出在默认的wire:loading指令会监听整个组件的所有更新状态，只要组件内任意属性发生变化，就会触发加载状态，导致原本该隐藏的搜索按钮没有正确被移除，两个按钮同时显示。

解决方案：限定加载状态的触发目标 #

通过给wire:loading相关指令添加target参数，指定只有当特定方法（比如你的render方法）执行时，才触发加载状态，避免组件其他属性更新时干扰按钮显示逻辑。

修改后的代码 #

<!-- 搜索按钮：仅当render方法执行时隐藏 -->
<button wire:loading.remove.target="render" type="button" class="btn btn-primary rounded-end" wire:click="render">
    <i class="ri-search-2-line"></i>
</button>

<!-- 加载按钮：仅当render方法执行时显示 -->
<button wire:loading.delay.target="render" type="button" class="btn btn-primary" disabled>
    <div class="spinner-border" role="status" style="width: 1rem; height: 1rem">
        <span class="sr-only">Loading...</span>
    </div>
</button>

关键说明 #

• wire:loading.remove.target="render"：明确只有当render方法执行时，才隐藏这个按钮
• wire:loading.delay.target="render"：明确只有当render方法执行时，才显示这个加载按钮
• 给加载按钮加上disabled属性，避免加载过程中重复点击

这样修改后，只有点击搜索按钮触发render方法时，才会切换两个按钮的显示状态，组件其他属性更新时不会影响按钮的显示逻辑。

内容的提问来源于stack exchange，提问作者Nazari