时间戳

首页 > 解决方案 > 使用 Vue JS 切换活动类

vue.js - 使用 Vue JS 切换活动类

问题描述

我有一个按钮列表，我想切换活动类，但从列表中的所有其他按钮中删除活动类。目前，我有活动类切换，但是当单击另一个按钮时，其他按钮保持活动状态。

更新：感谢@skirtle 的帮助，我能够解决我的问题。

  <li class="tc-product-form__color"
    @click="colorToggle"
    :class="{ 'tc-product-form__color--selected' : currentColor === color }">
    <button role="button" type="button"
      :data-color="color" :data-title="name"
      class="tc-product-form__color-btn js-product-swatch border border-solid"
      :style="backgroundStyle">
    </button>
  </li>

这是我的组件。

export default{
    props: ['swatch', 'currentColor'],
    computed: {
    backgroundStyle () {
      if (this.swatch.background.includes('url')) {
        return `backgroundImage: ${this.swatch.background}`
      } else {
        return `backgroundColor: ${this.swatch.background}`
      }
    },
    color () {
      return this.swatch.color
    },
    name () {
      return this.swatch.name
    }   
    },
    methods: {
      colorToggle () {
        this.$emit('change-color', this.color)
      }
    }           
}

https://jsfiddle.net/w37vLL68/158/正是我正在寻找的但是，我不明白我做错了什么无法完成结果。任何输入将不胜感激，在此先感谢您。

标签： vue.jsvuejs2vue-component

解决方案

从您发布的代码中确定有点困难，但看起来问题是每个样本/按钮组件都有自己的currentColor. 要获得您想要的单选按钮行为，您需要currentColor在它们之间共享一个属性。

您可以通过让父组件拥有该属性然后使用道具将其传递下来来实现这一点。然后，当单击以更新父级时，样本/按钮组件将触发一个事件。

有点像这样：

const swatch = {
  template: `
    <li class="tc-product-form__color"
      @click="colorToggle"
      :class="{ 'tc-product-form__color--selected' : currentColor === color }">
      <button role="button" type="button"
        :data-color="color" :data-title="name"
        class="tc-product-form__color-btn js-product-swatch border border-solid"
        :style="backgroundStyle">
      </button>
    </li>
  `,
  
  props: ['swatch', 'currentColor'],
  
  computed: {
    backgroundStyle () {
      if (this.swatch.background.includes('url')) {
        return `backgroundImage: ${this.swatch.background}`
      } else {
        return `backgroundColor: ${this.swatch.background}`
      }
    },
    color () {
      return this.swatch.color
    },
    name () {
      return this.swatch.name
    },
    needsBorder: function() {

    }
  },
  methods: {
    colorToggle () {
      this.$emit('change-color', this.color)
    }           
  }
}


new Vue({
  el: '#app',
  
  components: {
    swatch
  },
  
  data () {
    return {
      currentColor: null,
      swatches: [
        {name: 'Red', color: '#f00', background: '#f77'},
        {name: 'Green', color: '#0f0', background: '#7f7'},
        {name: 'Blue', color: '#00f', background: '#77f'}
      ]
    }
  },
  
  methods: {
    onChangeColor (color) {
      this.currentColor = color
    }
  }
})
.tc-product-form__color {
  list-style: none;
}

.tc-product-form__color-btn {
  border: 1px solid #000;
  height: 40px;
  width: 40px;
}

.tc-product-form__color--selected {
  background: #fdd;
  border: 1px solid #f00;
}
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <ul>
    <swatch
      v-for="swatch in swatches"
      :key="swatch.color"
      :swatch="swatch"
      :current-color="currentColor"
      @change-color="onChangeColor"
    ></swatch>
  </ul>
</div>

其他几点注意事项：

  1. 避免this在模板中使用。我已更改this.currentColor为currentColor.
  2. 属性color和name应该是计算属性。将值从道具复制到data通常是不必要的并且通常是有害的，因为如果道具更改，值将不会更新。在某些情况下，这是理想的行为，但通常不是。

我试图让你的大部分代码保持原样，这样你就可以看到我做了什么。要关注的关键部分是current-color道具和change-color事件。

推荐阅读