How to change a specific (this) button class when click on. Using Vue.js 2.0
You probably need a variable to find which button is currently selected. And you can use that variable to dynamically bind correct class: with : :class="{active: activeBtn === 'btn1' }".
Benefit of this approach is you have only one variable instead of array to save which button is currently selected, so you dont have to iterate on the array everytime you select a button.
var vm = new Vue({ el: '#toolBtns', data: { activeBtn:'' } });.active{ background-color:red;}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script><div id="toolBtns"><div class="btn-group" role="group" id="toolBtns"> <button class="btn" type="button" @click="activeBtn = 'btn1'" :class="{active: activeBtn === 'btn1' }">Btn1</button> <button class="btn" type="button" @click="activeBtn = 'btn2'" :class="{active: activeBtn === 'btn2' }">Btn2</button> <button class="btn" type="button" @click="activeBtn = 'btn3'" :class="{active: activeBtn === 'btn3' }">Btn3</button></div></div>See working fiddle here.
You don't need to set 'isActive: false', and you don't need to bind isActive to each of the items. you can do as follows: 1, declare an array, called 'candidates', then each item clicked will be pushed into candidates. 2, declare a function, called 'contains()' which checks if an item is in the candidates array. 3, bind contains() to each item. 4, in CSS, give 'clicked' some style.
html code:
<body> <div id="toolBtns"> <button v-for="item in buttons" v-on:click="provide(item)" v-bind:class="{clicked: contains(candidates, item)}" type="button">{{ item.name }} </button> </div></body>javascript code:
var toolBtns = new Vue({el: '#toolBtns',data: { buttons: [ {name: 'Btn1'}, {name: 'Btn2'}, {name: 'Btn3'}, ], candidates: [],},methods:{ provide: function(item) { if(this.candidates.indexOf(item) == -1) { this.candidates.push(item); } else { this.candidates.splice(this.candidates.indexOf(item), 1); } }, contains: function(arr, item) { return arr.indexOf(item) != -1; },}});CSS code
.clicked{ background-color: red;}here is the jsfiddle example https://jsfiddle.net/JoyAndBrave/anzdzq4L/6/
The direction of the solution above is correct but it's very vulnerable to errors since it uses indexes directly. As suggested in the answer above, doing a v-for would basically solve your problem.
var vm = new Vue({ el: '#toolBtns', data: { buttons:[{name:'Btn1',active:false},{name:'Btn2',active:false}, {name:'Btn3',active:false}] }, methods: { toggleActiveClass:function(index){ this.buttons[index].active=!this.buttons[index].active; } }}); <div class="btn-group" role="group" id="toolBtns"> <button v-for="(btn, index) in buttons" type="button" @click="toggleActiveClass(index)" :class="{active: btn.active}">{{btn.name}} </button> </div>Working fiddle: https://jsfiddle.net/z11fe07p/547/