javascript - 绑定(bind)类 - 数组的项目

Question

我有一个颜色数组，并且想在用户选择某种颜色时绑定(bind) css 类。我想根据所选选项更改选择输入的颜色。

<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'
      }
]

让它发挥作用的最佳方法是什么？

Answer 1

我不确定这是否正是您所追求的，但我就是这样做的。

<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>

请参阅此处的示例: https://jsfiddle.net/m4c00szq/

更新示例

<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/