Laravel+Vue中如何将数组属性绑定到表单输入数组

我之前也碰到过类似的问题，本质是Vue默认会把数组转成逗号分隔的字符串，再加上自定义组件没做数组类型value的处理，才导致提交后users变成了单元素数组。下面给你几个实用的解决方案：

方案1：循环渲染多个隐藏输入框（最直接稳妥） #

既然目标是让后端接收到多元素的users[]数组，最简单的方式就是遍历你的selectedIds，为每个id单独渲染一个myinp组件：

<myinp 
  type="hidden" 
  name="users[]" 
  :value="id" 
  v-for="id in selectedIds" 
  :key="id"
></myinp>

这样每个id都会作为独立的参数提交，Laravel后端就能自动解析成你想要的["1", "3"]格式数组。

方案2：修改自定义组件myinp支持数组值 #

如果不想渲染多个组件实例，可以修改myinp的内部逻辑，让它能接收数组并自动生成对应的输入项：

<template>
  <div>
    <!-- 遍历传入的value数组，生成多个隐藏输入 -->
    <input 
      type="hidden" 
      :name="name" 
      :value="item" 
      v-for="item in normalizedValue" 
      :key="item"
    >
  </div>
</template>

<script>
export default {
  props: ['value', 'name'],
  computed: {
    normalizedValue() {
      // 统一处理：如果是数组直接用，否则包装成数组兼容单个值的情况
      return Array.isArray(this.value) ? this.value : [this.value];
    }
  }
}
</script>

修改后你还是可以用原来的写法<myinp type="hidden" name="users[]" :value="selectedIds"></myinp>，组件内部会自动帮你生成多个输入框，提交后就能得到正确的数组格式。

方案3：手动处理表单提交（适合复杂场景） #

如果你的表单是通过axios等工具手动提交的，完全可以跳过输入框的绑定，直接把selectedIds作为数组传递：

axios.post('/your-submit-url', {
  users: this.selectedIds
})
.then(res => {
  // 处理响应逻辑
})

这种方式下，Laravel后端能直接接收到users数组，不需要处理表单提交的参数格式问题。

验证效果 #

不管用哪种方案，提交后查看请求参数，users都会变成你预期的样子：

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

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