How to get selected option text in vue form multiselect?

Question

Currently i'm working with vue-form multiselect( https://www.npmjs.com/package/@vueform/multiselect) which is a vue select component. In this select box i need both item id and item text, but in seperate. Like in v-model i want item id and based on select event also want to get item text. From the documentation of used component no guideline for such a requirement. If any one could hack the existing component or know how to get the selected option text along with item id, please share your knowledge. Thanks in advance.

Answer 1

based on what I have understood from your question that you have an array of objects as your select options like:

    data() {
        return {
            options: [
                { id: 1, text: 'vue' },
                { id: 2, text: 'vuex' },
                { id: 3, text: 'vue-cli' },
            ],
        }
    },

and you want to get the selected value as:

 { id: 1, text: 'vue' },

you have two ways to do it:

1. to set object prop to true

   <Multiselect
       v-model="someValue"
       label="text"
       value-prop="id"
       :object="true"
       :options="options" 
   />

so v-model will set your model the selected option as an object

2. to use @select event and it will retrun the selected option as an object and then you can get what ever you want

<template>
    <Multiselect v-model="someValue" @select="onSelect" :options="options" />
</template>
<script>
export default {
    data() {
        return {
            someValue: null,
            options: [
                { id: 1, text: 'vue' },
                { id: 2, text: 'vuex' },
                { id: 3, text: 'vue-cli' },
            ],
        }
    },
    methods: {
        onSelect(value) {
            console.log(value) // this will log the value as { id: 1, text: 'vue' }
        },
    },
}
</script>