时间戳

首页 > 解决方案 > 如何使用选择选项标签而不是列表更改所选颜色？

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

问题描述

我有一个 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>

标签： javascripthtmlvue.jsinterpolation

解决方案

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

select在字段上定义一个 on-change 处理程序。

<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-modeland watcher。

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

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

selectedColor在data属性中定义。

data() {
    return {
        selectedColor: null
    }
}

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

    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>

推荐阅读