Binding classes - items of an array

Question

I've got an array of colors and would like to bind the css class when the user selects a certain color. I would like to change the color of the select input, depending on the chosen option.

<li v-for="product in products">
  <select v-model="product.color">
    <option v-for="color in colors" :class="{ color: isActive }">{{ color }}</option>
  </select>
</li>

colors: [
  {
    color: 'white',
    isActive: false
  },
  {
    color: 'black',
    isActive: false
  }
],
products: [
      {
        color: 'white'
      },
      {
        color: 'white'
      }
]

What is the best way to make it work?

jostrander · Accepted Answer · 2018-02-11 19:17:30Z

1

I'm not sure if this is exactly what you're after, but this is how I would do it.

<li v-for="product in products">
  <select v-model="product.color">
    <option v-for="color in colors" :style="{ backgroundColor: color.color }">{{ color.color }}</option>
  </select>
</li>

See example here: https://jsfiddle.net/m4c00szq/

Updated Example

<li v-for="product in products">
  <select v-model="product.color" :style="{ backgroundColor: product.color }">
    <option v-for="color in colors" :style="{ backgroundColor: color.color }">{{ color.color }}</option>
  </select>
</li>

https://jsfiddle.net/m4c00szq/1/

edited Feb 11, 2018 at 19:17

answered Feb 11, 2018 at 19:06

jostrander

7445 silver badges20 bronze badges

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

2 Comments

kabugh Over a year ago

Thanks, I appreciate your time! I would like to change the color of the select input, after choosing the certain option. So if you choose option 'white', then change the color of an input to 'white'.

jostrander Over a year ago

Update example to show the select having a background color of selected color. Keep in mind you are limited to the colors the browser has defined in it's internal CSS unless you specify hexadecimal colors.

Collectives™ on Stack Overflow

Binding classes - items of an array

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related