Question

我有一个颜色数组，并希望在用户选择某种颜色时绑定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/

绑定类 - 数组的项

1 个答案: