Vue - 通过多个按钮切换 class

Question

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

我的代码需要更改什么：

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

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

总的来说：

点击小胡子组件中的按钮
Moustache 组件发出一个 "activated" 事件
父组件监听"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 存储管理。

Vue - 通过多个按钮切换 class

Vue - Toggle class through multiple buttons

toggle

vue.js