How to change a specific (this) button class when click on. Using Vue.js 2.0

Question

When clicked the any of the buttons they are all turns active. So what i want is just the clicked one should be changed.

var vm = new Vue({
	el: '#toolBtns',
	data: {
		isActive: false
	},
	computed: {
		activeClass: function () {
			return {
				active: this.isActive
			};
		}
	}
});

<div class="btn-group" role="group" id="toolBtns">
  <button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn1</button>
  <button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn2</button>
  <button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn3</button></div>

Saurabh · Accepted Answer · 2017-02-06 08:51:52Z

14

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.

edited Feb 6, 2017 at 8:51

answered Feb 6, 2017 at 7:39

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

4 Comments

radeveloper Over a year ago

Thank you Saurabh, I will do some research on the method you have suggested and I will try to share the result here. The above situation is still problematic. So it did not work.

Cristi Jora Over a year ago

See the comment bellow together with a working fiddle :)

radeveloper Over a year ago

Thank you @Saurabh. Yes, we can say that this solution is more effective in the current situation.

moses toh Over a year ago

@Saurabh Maybe you can help. Look at this : stackoverflow.com/questions/52566362/…

Xie Jun · Accepted Answer · 2017-11-17 10:03:55Z

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/

Cristi Jora · Accepted Answer · 2017-02-06 08:08:10Z

1

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/

answered Feb 6, 2017 at 8:08

Cristi Jora

1,75215 silver badges14 bronze badges

3 Comments

radeveloper Over a year ago

Thank you Cristi Jora :) The solution is successful. But only one button had to be active in each click.

Cristi Jora Over a year ago

Oh didn't read about that. Then upon toggleActiveClass you just have to disable all other buttons :) Fiddle here: jsfiddle.net/z11fe07p/549

radeveloper Over a year ago

Thank you. The solution is exactly what I want

Collectives™ on Stack Overflow

How to change a specific (this) button class when click on. Using Vue.js 2.0

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related