I have an object called colors, which stores color names:
{
"RD": "Red",
"BL": "Blue",
"GR": "Green",
"YW": "Yellow"
}
In my dropdown menu, I'm generating options for each color in the colors object:
<select v-model="colors">
<option selected>SELECT A COLOR</select> // default value
<option v-for="(color, key) in colors">{{ color }}</option>
</select>
This setup works well in the dropdown.
- The
{{ color }}displays the name of the color, like 'Blue' - If I were to use
{{ key }}instead, it would show 'BR'
Challenge:
- I'm having trouble assigning the
keyto thevalueattribute of eachoption
For example:
<option v-for="(color, key) in colors" :key="key">{{ color }}</option>
In this case, key ends up being 'Blue' instead of 'BR', and changing it to color gives the same result. What am I missing here?