javascript - Vuejs - 在对象循环中使用键作为选项值

Question

我有一个 colors对象，它完全包含您的想法:

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

我有一个 select创建 <option> 的下拉菜单对于 colors 中的每种颜色对象:

<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实际上是“Blue”而不是“BR”，并将其切换为 color显示相同的东西。我做错了什么？

Answer 1

通过 :value 设置 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演示功能。

希望对您有所帮助!