我有一个 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
显示相同的东西。我做错了什么?
最佳答案
通过 :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演示功能。
希望对您有所帮助!
关于javascript - Vuejs - 在对象循环中使用键作为选项值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48591779/