如何修复Laravel/Vue.js中数组输入值的提交异常问题

这个问题我之前处理过，核心原因很简单：当你把一个数组绑定到单个<input>的value属性时，浏览器会自动把数组转换成逗号分隔的字符串，所以后端收到的grantedUsers[]就会是一个只有一个元素（比如"1,2"）的数组，而不是你期望的多个独立元素。

正确的解决方案：动态生成多个隐藏输入框 #

你需要为hiddenData数组中的每一个ID单独生成一个<input type="hidden">，每个输入框的name都设为grantedUsers[]。这样浏览器会把每个输入框的值作为数组的独立项提交给后端。

修改你的模板代码，替换原来的单个隐藏输入框：

<!-- 移除原来的单个输入框，换成下面的循环 -->
<input 
  type="hidden" 
  name="grantedUsers[]" 
  :value="id" 
  v-for="id in hiddenData" 
  :key="id"
>

你的Vue逻辑部分（addUser和removeUser方法）不需要修改，因为hiddenData数组的维护逻辑是正确的——每次添加/移除用户时，数组会同步更新，对应的隐藏输入框也会自动创建/销毁。

验证后端结果 #

提交表单后，后端用dd(request('grantedUsers'))就能得到你期望的输出：

array:2 [▼
  0 => "1"
  1 => "2"
]

备选方案（不推荐）：后端拆分字符串 #

如果你暂时不想修改前端代码，也可以在后端手动拆分收到的字符串，但这种方式不够健壮（比如如果ID中意外包含逗号就会出错）：

$grantedUsers = explode(',', request('grantedUsers')[0] ?? '');
dd($grantedUsers);

还是更推荐前端动态生成输入框的方案，这是符合HTTP表单提交规范的做法。

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