I'm working with Vue 3 and Bootstrap 5.
I have a select with multiple options. Now I'm displaying my option.TEXT and this value will also be passed into my methods when I change something. But I want to pass the key (option.ID) when I change something.
But I also want my v-model to be my option.ID but displaying my option.TEXT.
How can I achieve this without checking it in the methods itself.
SELECT:
<select class="form-select" v-model="value" @change="get_key()">
<option v-for="option in options" :key="option.ID">
{{ option.TEXT }}
</option>
</select>
OPTIONS ARRAY:
[
{ "ID": 1,
"TEXT": "One"
},
{ "ID": 2,
"TEXT": "Two"
},
{ "ID": 3,
"TEXT": "Three"
},
]
The option attribute value should be bound to the option.ID :
<select class="form-select" v-model="value" @change="get_key()">
<option v-for="option in options" :key="option.ID" :value="option.ID">
{{ option.TEXT }}
</option>
</select>