[Vuejs]-How to change a button class on click in Vue?

by

2👍

i provide an example like yours, it works fine, i think the property activeTab is a string, and when you try to use strict equality that retuns false 

   <button class="initial" :class="{'is-active': activeTab === 1}" name="button" @click="activeTab=1">START</button>

check this :

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    activeTab: 0
  },
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />



<div id="app" class="container">

  <button   class="btn" :class="{'btn-primary':activeTab===1}" @click="activeTab=1">START</button>


</div>
👤Boussadjra Brahim

1👍

Despite the core API, I don’t like to create an object to use a single dynamic class, I created this small lib, v-stylish

Take a look in how simple is to toggle a class with it:

Vue.use(vStylish.default);

new Vue({
 el: '#app',
 data: function() {
  return {
    isActive: false
  };
 },
 methods: {
   toggleState: function() {
     this.isActive = !this.isActive;
   }
 }
});
button.is-active {
  background-color: lightblue;
  border: green solid 2px;
  color: red;
}
<script src="https://unpkg.com/v-stylish@1.0.0/dist/vStylish.umd.js"></script>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <button
    v-class:is-active="isActive"
    @click="toggleState">
    Toggle state
  </button>
</div>
👤Giovane

1👍

<template>
  <button :class="{'initial': activeTab !== 1, 'is-active': activeTab === 1}" name="button" @click="setActiveTab">START</button>
</template>

<script>
    export default {
      data () {
        return {
            activeTab: 0
        }
      },
      methods: {
          setActiveTab(){
              let _this = this; //just for context change,
                                //this can be ignored if you make                                   //this function an arrow
                                //or bind the function
              _this.activeTab = 1;
          }
      }
    }
</script>

<style>
    .is-active{
        background-color: red;
    }
    .initial{
        background-color: purple;
    }
</style>

This is simply because, your initial class is always set regardless, and supersedes the styling of the is-active class. in the code above, the initial class is only set when active tab is not ==1; thus, allowing the is-active class to take effect, when it’s required condition is met.

There are also other ways to achieve dynamic classes in vue:
vue docs dynamic classes

👤MGS

1👍

This is the shortest distance to done.

See it in action – https://codepen.io/stephanieschellin/pen/WaZvPR

HTML

<div id="app">

  <button 
    v-bind:class="{ 'i-am-active': button_active_state }"
    v-on:click="button_active_state = !button_active_state"
    name="button"
  >START</button>

</div>

JS

new Vue({
  el: '#app',
  data: {
    button_active_state: false
  }
});

CSS

.i-am-active {
  color: orange;
}

Explanation

In Vuejs if your data variable is Boolean using true/false you can leverage the ! modifier to toggle its value between true and false.

v-on:click="button_active_state = !button_active_state"

This allows you to avoid having call a method to perform the conditional check and modify the true/false value. Everything needed to toggle the value is baked into Vue.

For a more in depth example see – https://www.tutorialsplane.com/vue-js-toggle-class-click/

👤Stephanie Schellin

Leave a comment