Laravel多对多关系下，如何在编辑页传递关联数据到视图？

1. 控制器修改（获取关联数据与可选选项） #

在edit方法中，你需要预加载当前turno关联的dias数据，同时获取所有可选的dias选项，再提取已关联项的ID用于前端回显选中状态：

public function edit(Turno $turno)
{
    // 预加载关联的dias，避免N+1查询
    $turno->load('dias');
    
    // 获取所有可选择的dias数据
    $todosLosDias = Dia::all();
    
    // 提取已关联的dias的ID集合
    $diasAsociadosIds = $turno->dias->pluck('id');

    return Inertia::render('Turnos/Editar', [
        'turno' => $turno,
        'todosLosDias' => $todosLosDias,
        'diasAsociadosIds' => $diasAsociadosIds,
    ]);
}

2. 前端Inertia视图（多选表单实现） #

以Vue组件为例，利用v-model绑定已关联的ID集合，实现多选下拉框的默认选中与编辑：

<template>
  <div class="edit-turno">
    <h2>Editar Turno</h2>
    <form @submit.prevent="guardarCambios">
      <!-- 其他Turno字段的输入框 -->
      <div class="form-group">
        <label for="dias">Días Asociados</label>
        <select 
          id="dias" 
          multiple 
          v-model="form.diasAsociadosIds"
          class="form-control"
        >
          <option 
            v-for="dia in todosLosDias" 
            :key="dia.id" 
            :value="dia.id"
          >
            {{ dia.nombre }} <!-- 替换为Dia模型的实际显示字段 -->
          </option>
        </select>
      </div>
      <button type="submit" class="btn btn-primary">Guardar Cambios</button>
    </form>
  </div>
</template>

<script setup>
import { useForm } from '@inertiajs/vue3';

const props = defineProps({
  turno: Object,
  todosLosDias: Array,
  diasAsociadosIds: Array,
});

// 初始化表单数据，包含已关联的dias ID
const form = useForm({
  // 复制turno的其他字段到表单
  ...props.turno,
  diasAsociadosIds: props.diasAsociadosIds,
});

const guardarCambios = () => {
  form.put(route('turnos.update', props.turno.id), {
    onSuccess: () => {
      // 成功后可跳转到列表页或其他页面
      router.push({ name: 'turnos.index' });
    },
  });
};
</script>

3. 更新方法处理关联关系 #

在update方法中，使用sync方法同步turno与dias的关联，该方法会自动添加新选中的项、移除未选中的项：

public function update(Request $request, Turno $turno)
{
    // 表单验证
    $validated = $request->validate([
        // 添加其他turno字段的验证规则
        'diasAsociadosIds' => 'array',
        'diasAsociadosIds.*' => 'exists:dias,id',
    ]);

    // 更新turno的基本字段
    $turno->update($validated);
    
    // 同步dias关联
    $turno->dias()->sync($request->diasAsociadosIds);

    return redirect()->route('turnos.index');
}

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