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 。

希望有幫助！