Vue下拉菜单v-bind绑定后控制器接收[object Object]问题求助

原生HTML表单仅支持传递字符串类型的值，你当前给<option>绑定了对象，浏览器会自动将其转换为[object Object]字符串，这就是问题的根源。下面提供两种针对性解决办法：

方案1：直接绑定SKU到option的value（最简实现） #

如果你的需求仅为提交SKU值，不需要在前端通过选中值获取stockLevel，直接修改v-bind:value为infos.SKU即可：

<select v-model="selected" name="SKU[]" @change="onChange($event)">
  <option v-for="infos in data" v-bind:value="infos.SKU">{{infos.SKU}}</option>
</select>

修改后表单提交时，控制器接收到的SKU[]就是对应的SKU字符串数组。

方案2：保留前端对象操作，单独处理表单提交 #

如果前端需要用到选中对象的stockLevel等数据，不想放弃绑定对象的逻辑，可以拆分处理：

1. 将<select>的v-model绑定到存储对象的变量（比如selectedItem）
2. 添加隐藏的<input>元素，专门存储对应的SKU值，name设为SKU[]：

<select v-model="selectedItem" @change="onChange($event)">
  <option v-for="infos in data" v-bind:value="{ level: infos.stockLevel, SKU: infos.SKU }">{{infos.SKU}}</option>
</select>
<input type="hidden" name="SKU[]" :value="selectedItem?.SKU">

这种方式既保留了前端对选中对象的操作能力，又能让表单提交时传递正确的SKU值。

额外提示：原代码存在两处冗余/错误写法

• <select>上的@onChange是错误语法，Vue中应使用@change
• 无需在<option>上绑定@change，监听<select>的change事件即可

内容的提问来源于stack exchange，提问作者David-Dj Bryant