vue-next-select组件选中值未同步，提交表单仅获取搜索输入值

问题根源 #

1. 同时使用v-model和@input手动赋值，导致数据同步逻辑冲突——v-model本身已负责双向绑定，手动修改form.tankno会干扰组件的正常数据同步流程
2. @input事件中错误使用$event.target.value：vue-next-select的input事件返回的是选中的选项数据（而非DOM事件对象），这种写法会错误拿到搜索框的输入内容，而非最终选中的选项值

修复步骤 #

• 移除@input绑定的手动赋值代码，完全依赖v-model自动处理数据同步
• 统一v-model绑定的变量与表单提交时使用的变量（你的代码里v-model="tankno"但赋值给form.tankno，需保持一致）
• 确认track-by和label-by的字段名与options数组中对象的字段完全匹配

修复后的代码示例 #

import VueSelect from 'vue-next-select';
const app = createApp({})
app.component('vue-select', VueSelect)

<vue-select 
  v-model="form.tankno" 
  :options="tanks1" 
  searchable 
  close-on-select 
  label-by="tankno" 
  class="text-left h-10 sinput" 
  search-placeholder="Search Tank No" 
  placeholder="Select Tank No"  
  track-by="tankno"
></vue-select>

额外说明 #

如果tanks1是对象数组（比如[{tankno: 'T001'}, {tankno: 'T002'}]），track-by="tankno"会让组件根据tankno字段识别选中项，v-model绑定的form.tankno会自动同步为选中项的tankno值，提交表单时直接使用form.tankno即可。

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