Laravel+Livewire环境下多对多关联两个pivot表数据存储失效问题

问题原因 #

• 传统表单提交只会携带带有name属性的输入项数据，你当前表单里的站点多选框、客户下拉框都只绑定了Livewire的wire:model属性用于组件内部状态同步，没有配置对应的name属性，提交请求时根本不会上传选中的关联数据。
• 后端sync方法接收的$request->input('stations', [])、$request->input('clients', [])拿到的都是默认空数组，所以不会写入多对多关联的pivot表。

解决方案 #

方案一：补充表单控件name属性（适配现有后端逻辑） #

直接修改表单内两个控件的代码，补充对应name即可：

1. 站点多选框新增name="stations[]"，多选框name后加[]才会以数组格式提交所有选中值：

<input wire:model="selected" value="{{ $station->id }}" type="checkbox" name="stations[]">

2. 客户下拉框补充对应name，单选场景加name="clients"，多选场景加multiple属性和name="clients[]"：

<!-- 单选场景 -->
<select wire:model="clientselected" name="clients" class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-state">

<!-- 多选场景 -->
<select wire:model="clientselected" name="clients[]" multiple class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-state">

方案二：改用Livewire原生提交（更符合Livewire开发规范） #

如果不想用传统表单提交，可直接把逻辑迁移到Livewire组件内：

1. 表单标签修改为<form wire:submit.prevent="storeWorkbook">，移除原有action、method属性
2. 在Livewire组件中新增storeWorkbook方法，直接读取组件内部的$selected、$clientselected变量处理关联存储即可，无需通过请求传参。

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