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'
});

asemahle · Accepted Answer · 2016-12-01 23:26:14Z

3

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:

Button is clicked in moustache component
Moustache component emits a "activated" event
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.

answered Dec 1, 2016 at 23:26

asemahle

20.8k4 gold badges42 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Clinton Green Over a year ago

Hi, thanks for that, I'm just hesitant to use this method because I don't like the idea of listing all the buttons in the data. For instance how would this work when I plugged it into a database and used v-for for the components?

asemahle Over a year ago

You can populate the buttons array from a database. The example I provided uses v-for for the components.

Collectives™ on Stack Overflow

Vue - Toggle class through multiple buttons

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related