Livewire点赞按钮异常：删除选中项却仅删最后一项的修复咨询

问题现状 #

当前基于Livewire开发的收藏按钮存在以下问题：

• 单个收藏时删除功能正常，但多个收藏时删除某一项，所有收藏图标都会变成空心；刷新页面后仅最后一项被删除，其余收藏仍存在于数据库中。
• 尝试使用User与Vacature的hasMany关联时，会一次性删除所有收藏。

错误原因分析 #

1. 变量覆盖问题：在mount方法的循环中，你将$this->favoriet每次赋值为单个Favoriet实例，循环结束后$this->favoriet仅保留最后一条收藏记录，导致删除操作只会作用于最后一条数据。
2. 删除方法无目标定位：deleteFavoriet方法未接收要删除的职位ID，无法精准定位到具体要删除的收藏记录。
3. 全局状态变量干扰：$updatePage是全局布尔变量，删除时设置为true会让所有收藏项进入未收藏分支，导致图标全部失色。
4. 关联逻辑不合理：用户与职位的收藏关系属于多对多场景，错误使用hasMany会导致批量删除问题；同时直接存储职位名称、描述属于冗余数据。

修复方案 #

步骤1：优化模型关联 #

保留现有Favoriet模型的前提下，完善关联关系：

• User模型：

public function favorieten()
{
    return $this->hasMany(Favoriet::class);
}

• Vacature模型：

public function favorieten()
{
    return $this->hasMany(Favoriet::class);
}

（更优方案是使用多对多关联，无需Favoriet模型，直接建立user_vacature中间表，此处基于现有代码修复）

步骤2：修改Livewire组件代码 #

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Auth;
use App\Models\Vacature;
use App\Models\Favoriet;

class Vacatures extends Component
{
    public $orderBy = "Sorteer: Nieuwste Vacatures";
    public $vacids = [];

    public function mount()
    {
        $this->loadUserFavorites();
    }

    // 提取加载收藏ID的复用方法
    private function loadUserFavorites()
    {
        if (Auth::check()) {
            // 直接通过关联提取收藏的职位ID，避免循环变量覆盖
            $this->vacids = Auth::user()->favorieten->pluck('vacature_id')->toArray();
        } else {
            $this->vacids = [];
        }
    }

    public function saveFavoriet($id)
    {
        if (!Auth::check()) {
            return redirect('login')->with('message',
                'Log in om je favorieten op te slaan, je kunt ze dan altijd terugvinden in jouw favorieten menu.');
        }

        // 检查是否已收藏，避免重复创建
        $isFavorited = Favoriet::where('user_id', Auth::id())
            ->where('vacature_id', $id)
            ->exists();

        if (!$isFavorited) {
            $vacature = Vacature::findOrFail($id);
            Favoriet::create([
                'user_id' => Auth::id(),
                'vacature_id' => $vacature->id,
                'vacature_naam' => $vacature->naam,
                'beschrijving' => $vacature->beschrijving
            ]);

            $this->loadUserFavorites();
        }
    }

    public function deleteFavoriet($id)
    {
        if (Auth::check()) {
            // 通过用户ID+职位ID精准定位并删除目标收藏
            Favoriet::where('user_id', Auth::id())
                ->where('vacature_id', $id)
                ->delete();

            $this->loadUserFavorites();
        }
    }

    public function render()
    {
        // 补充职位查询逻辑（示例）
        $vacatures = Vacature::orderBy('created_at', 'desc')->get();
        return view('livewire.vacatures', compact('vacatures'));
    }
}

步骤3：修改View代码（移除全局状态变量） #

<div class="col-lg-3 d-flex align-items-center justify-content-center">
    <div class="text-center">
        <a href="{{ url('vacature_details', $vac->id) }}" class="buy-btn">Bekijk Vacature</a>
    </div>
</div>

@if(in_array($vac->id, $vacids))
    <div>
        <a wire:click.prevent="deleteFavoriet({{ $vac->id }})" 
           class="bi bi-heart-fill fa-lg m-2" 
           data-tooltip="tooltip" 
           data-placement="top" 
           title="Is al favoriet">
        </a>
    </div>
@else
    <div>
        <a wire:click.prevent="saveFavoriet({{ $vac->id }})" 
           class="bi bi-heart fa-lg m-2" 
           data-tooltip="tooltip" 
           data-placement="top" 
           title="Voeg toe aan favorieten">
        </a>
    </div>
@endif

<div class="border"></div>
@endforeach
</div>
</div>
@endif
</div>
</section>

关键修改说明 #

1. 移除全局状态变量：删除$updatePage，直接通过$vacids数组的变化控制图标状态，Livewire会自动响应数组更新并重新渲染视图。
2. 精准删除逻辑：deleteFavoriet方法接收职位ID，通过用户ID+职位ID定位目标收藏记录，避免误删。
3. 避免变量覆盖：通过关联pluck方法直接提取收藏ID，不再使用循环覆盖组件变量。
4. 重复收藏校验：保存收藏前先检查是否已存在，防止重复创建记录。
5. 复用加载逻辑：将加载用户收藏的逻辑提取为私有方法，便于在保存/删除后统一更新状态。

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