Vue.js中如何获取select选中项对应ID用于axios接口提交

根本不需要额外写数组过滤、匹配查找的逻辑，问题根源出在<option>标签的value绑定上。
你当前代码里给option写的是v-bind:value="item.name"，下拉选中时v-model自然会把绑定的name值存到响应式变量里，只要把value的绑定目标改成item.id就能一步到位拿到需要的ID，完全不影响下拉框的展示效果——用户看到的仍然是选项的name文本。

修改后的模板代码如下：

<div class="form-group col-md-9">
  <select class="form-select" id="inputSubject" v-model='subject'>
    <option disabled value="">Select subject</option>
    <option v-for="item in subjects" :value="item.id" :key="item.id">{{ item.name }}</option>  
  </select> 
</div>

<div class="form-group col-md-9">
  <select class="form-select" id="inputWorkType" v-model='work_type'>
    <option disabled value="">Select work type</option>
    <option v-for="item in work_types" :value="item.id" :key="item.id">{{item.name}}</option>  
  </select> 
</div>

改完之后，this.subject和this.work_type存储的直接就是选中项对应的ID值，你原有submitForm里的参数构造逻辑不需要做任何调整，直接post提交就符合后端要求。
另外你代码里写的console.log(this.subject.key())是无效语法，字符串没有key()方法，改完绑定后直接console.log(this.subject)就能打印出选中的ID。

可选扩展场景 #

如果后续业务除了传ID，还需要在前端用到选中项的name等其他字段，可以直接把option的value绑定为整个item对象：

<option v-for="item in subjects" :value="item" :key="item.id">{{ item.name }}</option>

这时候v-model存的是完整的选中项对象，提交参数时取this.subject.id传给后端即可，同时也能直接通过this.subject.name拿到名称，不需要额外查找。这个方式唯一需要注意的是如果做编辑回显，要保证回显的对象引用和下拉列表里的对象引用一致，纯新增场景下使用没有任何问题。

你之前考虑的数组过滤方案属于绕路实现，Vue的v-model本身就会自动同步option的value值，直接修改绑定目标是最简洁、性能最好的实现方式。

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