toggle - Vue - 通过多个按钮切换类

Question

我有一个显示投票按钮的 Vue 组件。当用户单击“投票”按钮时，将添加一个 .active 类。现在我需要确保在任何给定时间只有一个投票按钮可以拥有这个 .active 类。

我需要在我的代码中更改什么:

Vue.component('moustache', {
    name: 'moustache',
    props: ['type', 'img'],
    template: `<li>
                 <p><strong>@{{ type }}</strong></p>
                 <img width="300" height="200" :src="img">
                 <button class="btn btn-primary" v-bind:class="{ active: isActive }" :data-type="type" @click="toggleClass">
                   Vote
                 </button>
              </li>`,
    data: function(){
        return{
            isActive: false
        }
    },
    methods: {
        toggleClass(){
                this.isActive = !this.isActive;
        }
    }
});

new Vue({
    el: '#app'
});

Answer 1

每个 mustache 组件应该只控制自己的状态。在您描述的情况下，最好让父组件在单击一个按钮时处理更新所有按钮。

一般来说:

1. 在 mustache 组件中点击了按钮
2. Moustache 组件发出“已激活”事件
3. 父组件监听“activated”事件，并更新所有按钮的状态

这是一个代码示例:

Vue.component('moustache', {
  name: 'moustache',
  props: ['type', 'img', 'isActive'],
  template: `<li>
                 <p><strong>@{{ type }}</strong></p>
                 <img width="300" height="20" :src="img">
                 <button class="btn btn-primary" v-bind:class="{ active: isActive }" :data-type="type" @click="toggleClass">
                   Vote
                 </button>
              </li>`,
  methods: {
    toggleClass() {
      this.$emit('activate')
    }
  }
});

new Vue({
  el: '#app',
  data: {
    buttons: [{
      isActive: false,
      type: 'Button 1',
      img: null
    }, {
      isActive: false,
      type: 'Button 2',
      img: null
    }, {
      isActive: false,
      type: 'Button 3',
      img: null
    }, ]
  },
  methods: {
    activateButton: function(activatedButton) {
      for (let button of this.buttons) {
        button.isActive = button === activatedButton
      }
    }
  }
});

.active { background-color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>

<div id="app">
  <moustache v-for="button in buttons" 
             :is-active="button.isActive"
             :type="button.type"
             :src="button.src"
             v-on:activate="activateButton(button)"></moustache>
</div>

当然，这种方法只有在所有投票按钮都可以由同一个父组件控制的情况下才有效。如果您需要更复杂的行为，那么可能值得研究 Vuex .然后按钮的状态可以由 vuex 存储管理。