how to pass the key as select option value from v-for when changed (VueJS)-CodePudding

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  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"
  },
]

CodePudding user response：

The option attribute value should be bound to the option.ID :

<select  v-model="value" @change="get_key()">
    <option v-for="option in options" :key="option.ID" :value="option.ID">
        {{ option.TEXT }}
    </option>
</select>