JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<div id="toolBtns">
  <div class="btn-group" role="group" id="toolBtns">
  <button v-for="(btn, index) in buttons" type="button" @click="toggleActiveButton(index)"       
  :class="{active: btn.active}">{{btn.name}}</button>
  </div>
</div>

CSS

.active{
  background-color:red;
}

JavaScript

var vm = new Vue({
	 el: '#toolBtns',
	 data: {
		buttons:[{name:'Btn1',active:false},{name:'Btn2',active:false},
                {name:'Btn3',active:false}]
	 },
	 methods: {
    toggleActiveButton:function(index){
      this.buttons.forEach(function(button){
        button.active=false;
      })
      this.buttons[index].active=!this.buttons[index].active;
    }
	  }
 });