Laravel多对多pivot表数据回显时wire:model下拉框不显示选中值问题

核心问题原因 #

• 编辑赋值时未清空$pic旧值，导致残留数据覆盖新查询的结果
• 直接按遍历顺序给$pic数组赋值，没有区分spv和manager分类，$pic[0]和$pic[1]的取值和下拉框的分类不匹配
• 编辑场景使用attach方法会追加关联数据，而非覆盖旧关联，容易导致中间表重复数据
• 模型scope方法中直接调用get()，不符合Laravel scope的设计规范，可能引发查询异常

修复步骤 #

1. 修正模型scope写法 #

将Officer模型的scope方法中的get()移除，保留查询构造器：

public function scopeFilterByCategory(Builder $query, $type = 'spv')
{
    return $query->select('id', 'name', 'title_id')->with('title')
        ->whereHas('title', function (Builder $query) use ($type) {
        $query->where('category', '=', $type);
    });
}

组件中调用时再执行get()获取数据：

return view('livewire.project.data-project', [
    'dataProject' => $this->rows,
    'spv' => Officer::filterByCategory()->get(),
    'manager' => Officer::filterByCategory('mgr')->get()
]);

2. 修正编辑页面的赋值逻辑 #

打开编辑弹窗时先清空旧的$pic数据，再按分类分别赋值到对应索引，保证和下拉框的绑定关系匹配：

public function showUpdateModal(Project $project)
{
    if ($this->project->isNot($project)) $this->project = $project;
    // 清空旧数据避免残留
    $this->pic = [];
    // 按分类分别取值，对应pic数组的索引
    $this->pic[0] = $project->officers->where('title.category', 'spv')->first()?->id;
    $this->pic[1] = $project->officers->where('title.category', 'mgr')->first()?->id;
}

3. 修正保存逻辑 #

编辑场景使用sync方法替代attach，自动覆盖旧的关联关系，避免中间表出现重复数据：

public function save()
{
    $this->project->save();
    // 过滤空值，避免关联无效id
    $data_pic = array_filter(Arr::flatten($this->pic));
    // sync会自动删除旧关联，写入新的关联数据
    $this->project->officers()->sync($data_pic);
}

4. 可选兜底方案 #

如果仍存在回显异常，可给下拉框添加唯一的wire:key避免Livewire渲染冲突，同时手动加selected判断兜底：

<select wire:model="pic.0" wire:key="spv-select-{{ $project->id }}" class="custom-select">
    @foreach ($spv as $person)
    <option value="{{ $person->id }}" {{ $person->id == ($pic[0] ?? '') ? 'selected' : '' }}>{{ $person->name }}</option>
    @endforeach
</select>

<select wire:model="pic.1" wire:key="mgr-select-{{ $project->id }}" class="custom-select">
    @foreach ($manager as $mgr)
    <option value="{{ $mgr->id }}" {{ $mgr->id == ($pic[1] ?? '') ? 'selected' : '' }}>{{ $mgr->name }}</option>
    @endforeach
</select>

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