Currently, I'm utilizing Vue 3 along with Bootstrap 5.
In my project, there is a select element containing various options. Right now, the displayed text (option.TEXT) is passed as the value to my methods when any changes are made. However, what I actually need is to pass the corresponding key (option.ID) when a change occurs.
My goal is for the v-model to represent the option.ID, while still displaying the option.TEXT.
Is there a way to achieve this without having to manually validate it within the methods?
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"
},
]