Vue - Toggle class through multiple buttons

Question

I have a Vue component, which displays a Vote button. When the user clicks on the Vote button an .active class gets added. Now I need to make sure only one Vote button can have this .active class at any given time.

What do I need to change in my code:

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

Each moustache component should only be in control of its own state. In the situation you describe, it would be best to let a parent component handle updating all the buttons when one is clicked.

In general:

1. Button is clicked in moustache component
2. Moustache component emits a "activated" event
3. The parent component listens for the "activated" event, and updates the state of all the buttons

Here is an example in code:

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>

Of course, this approach only works if all of Vote buttons can be controlled by the same parent component. If you require more complex behaviour, then it might be worth looking into Vuex. Then the state of your buttons could be managed by a vuex store.