如何使用选择选项标签而不是列表更改所选颜色？

Question

我有一个 Vue 组件，当我单击带有颜色的列表项时，图像会改变颜色。

    <div class="product__machine-info__colors">
      <ul>
        <li v-for="(color, index) in machine.content[0].machine_colors" :key="color.color_slug" v-if="color.inStock" v-on:click="selectColor(index)"
          v-bind:class="{ active: (color.color_slug === selectedColor.color_slug)}">
          <img v-bind:src="color.color_dash">
        </li>
      </ul>
    <div>

这可以正常工作并更改我需要更改的图像。 现在我想要同样的效果，但列表需要是一个带有选项的选择框。

到目前为止，我已经得到了这个，但不知道如何使它工作。

        <div class="product__machine-info__mobile__inner--color select-style">
          <select name="machineColorWay">
            <option v-for="(color, index) in machine.content[0].machine_colors" :key="color.color_slug" v-if="color.inStock" v-on:select="selectColor(index)"
              v-bind:class="{ active: (color.color_slug === selectedColor.color_slug)}" v-bind:value="selectColor">
              {{ color.color_slug }}
            </option>
          </select>
        </div>

如有任何帮助，将不胜感激。

这是在选择选项更改时需要更改的组件（轮播之一）

<div class="product__carousel">
    <Carousel showIcon v-if="selectedColor" :machineColor="selectedColor" />
    <!-- Image carousel gets loaded in -->
    <div class="product__machine-info__mobile">
      <div class="product__machine-info__mobile__inner">
        <div class="product__machine-info__mobile__inner--color select-style">
          <select v-on:change="selectedColor(index)">
            <option v-for="color in machine.content[0].machine_colors" :key="color.color_slug" :value="color.color_slug">
              {{ color.color_slug }} 
            </option>
          </select>
        </div>
      </div>
    </div>
  </div>

Answer 1

使用选择，您不再需要您的方法selectColor。您可以使用v-model。我将循环中的color 重命名为currentColor 以保持更好的概览，因为color 已根据您提供的代码在data 中定义。

    <div class="product__machine-info__mobile__inner--color select-style">
      <select name="machineColorWay" v-model="color">
        <option v-for="currentColor in machine.content[0].machine_colors" :key="currentColor.color_slug" v-if="currentColor.inStock"
          v-bind:class="{ active: (currentColor.color_slug === color.color_slug)}" v-bind:value="currentColor">
          {{ currentColor.color_slug }}
        </option>
      </select>
    </div>

Answer 2

当用户选择一种颜色时，您想要做一些事情。实现此目的的一种方法如下。

在select 字段上定义一个更改处理程序。

<select name="machineColorWay" v-on:change="selectColor">

现在，在处理程序中，您可以像这样获取选定的值

selectColor(event) {
    let color = event.target.value;
    // now do what you wanna do with the value. Here the value
    // is what you pass using the `v-bind:value="selectColor"`
}

另一种方法是使用v-model 和watcher。

首先，将select 绑定到数据模型。

<select name="machineColorWay" v-model="selectedColor">    

在data 属性中定义selectedColor。

data() {
    return {
        selectedColor: null
    }
}

现在在selectedColor 上使用观察器，您可以使用更改后的selectedColor 值调用selectColor 函数。

    watch: {
        // whenever color changes, this function will run
        color: function (newColor, oldColor) {
           console.log(newColor, oldColor);
        }
    }

这是一个有效的 JSFiddle：

var Main = {
  data() {
    return {
      colors: [{
          slug: 'white',
          name: 'white'
        },
        {
          slug: 'green',
          name: 'green'
        },
        {
          slug: 'blue',
          name: 'blue'
        },
      ],
      color: 'white'
    }
  },
  methods: {
    selectColor(event) {
      let color = event.target.value;
      this.color = color;
      console.log(color);
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <template>
  <select placeholder="Select" v-on:change="selectColor">
    <option v-for="item in colors" :key="item.slug" :value="item.name">
    {{ item.name }}
    </option>
  </select>
  
  <p>Selected Color: {{ color }}</p>
</template>
</div>