使用Vue Select多选组件时，如何仅获取选中项的ID？

方案一：使用组件原生reduce属性（推荐） #

Vue Select的Multiselect组件提供了reduce属性，可以直接将选中的对象转换为你需要的字段值（比如ID），无需额外的事件处理逻辑，这是最简洁的实现方式。

修改后的代码如下：

const form = useForm({
    name: '',
    tech_stack_id: [] as number[],
    description: '',
    preview_image: ''
});

// 可以删除原有的onTechStackChange函数

<div class="mb-5">
  <label class="typo__label">Pilih Tech Stack</label>
  <Multiselect 
    id="multiselect"  
    v-model="form.tech_stack_id" 
    :options="props.techStacks.data" 
    :multiple="true"
    :close-on-select="false" 
    :clear-on-select="false" 
    :preserve-search="true"
    placeholder="Pilih beberapa" 
    label="name" 
    track-by="id" 
    :preselect-first="true"
    <!-- 添加reduce属性，自动将选中对象转换为id -->
    :reduce="(item) => item.id"
  >
    <template #selection="{ values, search, isOpen }">
      <span class="multiselect__single" v-if="values.length" v-show="!isOpen">
        {{ values.length }} tech stack yang dipilih
      </span>
    </template>
  </Multiselect>
</div>

说明：reduce属性会在选中项变化时，自动把每个选中的对象映射为你指定的字段值，此时form.tech_stack_id直接得到的就是ID数组，完全符合需求。

方案二：修正事件处理逻辑（兼容现有写法） #

如果不想使用reduce，可以通过调整中间变量和事件参数来实现：

1. 新增一个中间变量存储选中的原始对象数组
2. 修正@input事件的参数传递逻辑

修改后的代码：

const selectedTechStacks = ref([]); // 存储选中的原始对象
const form = useForm({
    name: '',
    tech_stack_id: [] as number[],
    description: '',
    preview_image: ''
});

const onTechStackChange = (selected: any[]) => {
    form.tech_stack_id = selected.map(item => item.id);
    console.log(form.tech_stack_id);
}

<div class="mb-5">
  <label class="typo__label">Pilih Tech Stack</label>
  <Multiselect 
    id="multiselect"  
    v-model="selectedTechStacks" 
    :options="props.techStacks.data" 
    :multiple="true"
    :close-on-select="false" 
    :clear-on-select="false" 
    :preserve-search="true"
    placeholder="Pilih beberapa" 
    label="name" 
    track-by="id" 
    :preselect-first="true"
    <!-- 直接传递选中的对象数组作为参数 -->
    @input="onTechStackChange"
  >
    <template #selection="{ values, search, isOpen }">
      <span class="multiselect__single" v-if="values.length" v-show="!isOpen">
        {{ values.length }} tech stack yang dipilih
      </span>
    </template>
  </Multiselect>
</div>

说明：原代码的问题在于@input事件错误地传递了form.tech_stack_id作为参数，而实际上@input的回调参数本身就是选中的对象数组，同时通过中间变量存储原始对象，避免直接绑定form.tech_stack_id导致的类型冲突。

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