更改时如何从 v-for 将密钥作为 select 选项值传递（VueJS）

Question

我正在使用Vue 3和Bootstrap 5 。

我有一个select有多个选项。 现在我正在显示我的option.TEXT ，当我更改某些内容时，这个value也将传递到我的方法中。 但是我想在更改某些内容时传递key （option.ID） 。

但我也希望我的v-model成为我的option.ID但显示我的option.TEXT 。

我如何在不检查方法本身的情况下实现这一点。

SELECT：

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

选项数组：

[
  {  "ID": 1,
     "TEXT": "One"
  },
  {  "ID": 2,
     "TEXT": "Two"
  },
  {  "ID": 3,
     "TEXT": "Three"
  },
]

Answer 1

option属性值应绑定到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>