CODEWITHSUNDEEP
javascriptarraysbindingvue.js
kabugh
kabugh

Reputation: 315

Binding classes - items of an array

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?

Upvotes: 0

Views: 34

Answers (1)

jostrander
jostrander

Reputation: 754

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/

Upvotes: 1

Related Questions