为何仅最后点击的点赞心形按钮变色，其余按钮状态无变化？

问题根源 #

你当前的代码里，$vacid是单个变量，在mount方法的循环中，每次遍历用户收藏记录都会覆盖这个变量的值，最终只会保留最后一条收藏的职位ID。这就导致渲染时只有最后一个匹配的按钮显示填充状态；点击新按钮更新后，新的ID会覆盖旧值，之前的收藏按钮全部变回空心。

修复步骤 #

1. 修改组件数据结构，存储所有收藏ID

把单个变量改成数组，存储用户所有收藏的职位ID：

class Products extends Component
{
    public $orderBy;
    // 用数组存储所有收藏的职位ID
    public $favVacIds = [];
   
    public function mount()
    {
        $this->orderBy = "Sorteer: Nieuwste Vacatures";

        if(Auth::id()) {
            $user = Auth::user();
            // 直接提取所有收藏的vacature_id到数组
            $this->favVacIds = Favoriet::where('user_id', $user->id)->pluck('vacature_id')->toArray();
        }
    }
}

2. 调整模板判断逻辑

修改Blade模板，检查当前职位ID是否在收藏数组中，同时添加蓝色样式实现需求：

@if(in_array($vac->id, $favVacIds))
    <a class="bi bi-heart-fill fa-lg m-2 text-primary" href="{{url('favorieten',$vac->id)}}" 
       data-tooltip="tooltip" data-placement="top" title="Verwijder uit favorieten">
    </a>
@else
    <a class="bi bi-heart fa-lg m-2" href="{{url('favorieten',$vac->id)}}" 
       data-tooltip="tooltip" data-placement="top" title="Voeg toe aan favorieten">
    </a>
@endif
<div class="border"></div>
@endforeach 
</div> 

注：text-primary是Bootstrap默认的蓝色类，可根据你的样式需求替换成自定义蓝色类

3. 可选：实现无刷新实时更新状态

如果需要点击按钮后不用刷新页面就更新状态，在组件中添加收藏切换方法：

public function toggleFavoriet($vacatureId)
{
    $user = Auth::user();
    $favoriet = Favoriet::where('user_id', $user->id)->where('vacature_id', $vacatureId)->first();

    if($favoriet) {
        // 取消收藏，从数组移除ID
        $favoriet->delete();
        $this->favVacIds = array_diff($this->favVacIds, [$vacatureId]);
    } else {
        // 添加收藏，把ID加入数组
        Favoriet::create([
            'user_id' => $user->id,
            'vacature_id' => $vacatureId
        ]);
        $this->favVacIds[] = $vacatureId;
    }
}

然后修改模板链接为Livewire点击事件：

@if(in_array($vac->id, $favVacIds))
    <a class="bi bi-heart-fill fa-lg m-2 text-primary" wire:click="toggleFavoriet({{$vac->id}})" 
       data-tooltip="tooltip" data-placement="top" title="Verwijder uit favorieten">
    </a>
@else
    <a class="bi bi-heart fa-lg m-2" wire:click="toggleFavoriet({{$vac->id}})" 
       data-tooltip="tooltip" data-placement="top" title="Voeg toe aan favorieten">
    </a>
@endif

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