vue.jsselectvue-select

how to get only the id, when using vue select


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:

enter image description here


Solution

  • 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"
      ...
    />