Vuejs - Use key in object loop as option value

Question

I have a colors object, that contains exactly what you think:

{
  "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 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.

The {{ color }} expression shows the name, i.e. 'Blue'
If I were to instead use {{ key }} as the expression, it would read 'BR'

Challenge:

I am struggling to assign key to the option value attribute

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. What am I doing wrong?

Alexander Staroselsky · Accepted Answer · 2018-02-02 22:40:03Z

2

Try the following with setting value property via :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.

Hopefully that helps!

answered Feb 2, 2018 at 22:40

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs - Use key in object loop as option value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related