[英]Vuejs - Use key in object loop as option value
I have a colors
object, that contains exactly what you think: 我有一个
colors
对象,其中包含您的想法:
{
"RD": "Red",
"BL": "Blue",
"GR": "Green",
"YW": "Yellow"
}
I have a select
dropdown that creates an <option>
for each color in the colors
object: 我有一个
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>
This displays great in the dropdown. 这在下拉列表中显示很好。
{{ color }}
expression shows the name, ie ' Blue ' {{ color }}
表达式显示名称,即' Blue ' {{ key }}
as the expression, it would read ' BR ' {{ key }}
作为表达式,它将显示为' BR ' Challenge: 挑战:
key
to the option
value
attribute key
分配给option
value
属性 For example: 例如:
<option v-for="(color, key) in colors" :key="key">{{ color }}</option>
In this case key
is actually 'Blue' instead of 'BR', and switching it to color
shows the same thing. 在这种情况下,
key
实际上是“蓝色”而不是“ BR”,将其切换为color
也可以显示相同的内容。 What am I doing wrong? 我究竟做错了什么?
Try the following with setting value property via :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>
Here is a JSFiddle demonstrating the functionality. 这是一个演示功能的JSFiddle 。
Hopefully that helps! 希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.