So I have a select from Vue Select, but what comes out is all object data, what I want is only the ID of the data, how can I get just the ID?
here is my code
const form = useForm({
name: '',
tech_stack_id: [] as number[],
description: '',
preview_image: ''
});
const onTechStackChange = (selected: any) => {
form.tech_stack_id = selected.map((item: { id: number }) => 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="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" @input="onTechStackChange(form.tech_stack_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>
and this is the result:
According to the documentation you can simply use the reduce prop.
When working with objects, the reduce prop allows you to transform a given object to only the information you want passed to a v-model binding or @input event.
<Multiselect
v-model="form.tech_stack_id"
:options="props.techStacks.data"
:reduce="item => item.id"
...
/>