Vue.js-使用对象循环中的键作为选项值

Question

我有一个colors对象，其中包含您的想法：

{
  "RD": "Red",
  "BL": "Blue",
  "GR": "Green",
  "YW": "Yellow"
}

我有一个select下拉列表，可以为colors对象中的每种颜色创建一个<option> ：

<select v-model="colors">
  <option selected>SELECT A COLOR</select> // default value
  <option v-for="(color, key) in colors">{{ color }}</option>
</select>

这在下拉列表中显示很好。

• {{ color }}表达式显示名称，即' Blue '
• 如果我改用{{ key }}作为表达式，它将显示为' BR '

挑战：

• 我正在努力将key分配给option value属性

例如：

<option v-for="(color, key) in colors" :key="key">{{ color }}</option>

在这种情况下， key实际上是“蓝色”而不是“ BR”，将其切换为color也可以显示相同的内容。 我究竟做错了什么？

Answer 1

通过:value设置值属性尝试以下操作：

<select v-model="colors">
  <option selected>SELECT A COLOR</select>
  <option v-for="(color, key) in colors" :value="key" :key="key">{{ color }}</option>
</select>

这是一个演示功能的JSFiddle 。

希望有帮助！