How to Get Selected Option Text in Vue Form Multiselect?
Currently I'm Working with Vue-Form Multiselect( ) Which Is a Vue Select Component. in This Select Box I Need Both Item Id and Item Text, but in Seperate. Like...
Currently i'm working with vue-form 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.
1 Answer
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:
- 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
- to use
@selectevent 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>
Elena Rostova holds a Master's degree in Public Health Journalism. She covers groundbreaking medical research, holistic wellness trends, mental health awareness, and nutritional science.
