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 }}表达式显示名称，即“蓝色”
如果我使用{{ 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。

希望这有帮助！

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

1 个答案: