如何在Laravel Livewire中仅为特定组件应用加载状态

我来帮你搞定这个问题！你现在遇到的情况是，因为wire:target只指定了方法名togglePraise，Livewire没办法区分你点击的是哪个任务的调用，所以所有任务的加载提示都会一起显示出来。

解决方案：给wire:target添加具体参数 #

要让加载状态只作用于被点击的特定任务，你只需要在wire:target里明确指定带参数的完整方法调用，这样Livewire就能精准定位到触发操作的那个任务组件。

修改你的Blade按钮代码如下：

<button type="button" wire:click="togglePraise({{ $task->id }}, {{ $task->user->id }})">
    👍 <span class="small text-black-50 font-weight-bold"> {{ $task->task_praise->count() }} </span>
    <div wire:loading wire:target="togglePraise({{ $task->id }}, {{ $task->user->id }})"> Processing... </div>
</button>

原理说明 #

Livewire的wire:target指令支持识别带参数的方法调用，当你把任务ID和用户ID作为参数加入到wire:target的指定内容后，它就能准确匹配到触发操作的那个任务，只会给对应的组件显示加载状态，不会影响其他任务。

小提示 #

• 你可以给加载提示加一些CSS样式，比如设置字体大小、颜色，或者让它在按钮内居中显示，提升用户体验；
• 不用担心参数重复的问题，因为每个任务的$task->id都是唯一的，Livewire能准确区分不同的调用。

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