Vue.js toggle class on click

Question

How do you toggle a class in vue.js?

I have the following:

        <th class="initial " v-on="click: myFilter">
            <span class="wkday">M</span>
        </th>


        new Vue({
          el: '#my-container',

          data: {},

          methods: {
            myFilter: function(){

              // some code to filter users
            }
          }
        })

When I click th I want to apply active as a class as follows:

        <th class="initial active" v-on="click: myFilter">
            <span class="wkday">M</span>
        </th>

This needs to toggle i.e. each time its clicked it needs to add/remove the class.

How do you do this in vue.js?

Answer 1

This answer relevant for Vue.js version 2

<th 
  class="initial " 
  v-on:click="myFilter"
  v-bind:class="{ active: isActive }"
>
  <span class="wkday">M</span>
</th>

The rest of the answer by Douglas is still applicable (setting up the new Vue instance with isActive: false, etc).

Relevant docs: https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax and https://vuejs.org/v2/guide/events.html#Method-Event-Handlers

Answer 2

This example is using Lists: When clicking in some li it turn red

html:

<div id="app">
  <ul>
    <li @click="activate(li.id)" :class="{ active : active_el == li.id }" v-for="li in lista">{{li.texto}}</li>   
  </ul>
</div>

JS:

var app = new Vue({
  el:"#app",
  data:{
    lista:[{"id":"1","texto":"line 1"},{"id":"2","texto":"line 2"},{"id":"3","texto":"line 3"},{"id":"4","texto":"line 4"},{"id":"5","texto":"line 5"}],
    active_el:0
  },
  methods:{
    activate:function(el){
        this.active_el = el;
    }
  }
});

css

ul > li:hover {
  cursor:pointer;
}
.active {
  color:red;
  font-weight:bold;
}

Fiddle:

https://jsfiddle.net/w37vLL68/158/

Answer 3

You could have the active class be dependent upon a boolean data value:

<th 
    class="initial " 
    v-on="click: myFilter"
    v-class="active: isActive"
>
   <span class="wkday">M</span>
</th>



    new Vue({
      el: '#my-container',

      data: {
          isActive: false
      },

      methods: {
        myFilter: function(){
            this.isActive = !this.isActive;
          // some code to filter users
        }
      }
    })

Answer 4

If you need more than 1 class

You can do this:

<i id="icon" 
  v-bind:class="{ 'fa fa-star': showStar }"
  v-on:click="showStar = !showStar"
  >
</i> 

data: {
  showStar: true
}

Notice the single quotes ' around the classes!

Thanks to everyone else's solutions.

Answer 5

Without the need of a method:

// html element
<div id="mobile-toggle"
 v-bind:class="{ active: showMobileMenu }"
 v-on:click="showMobileMenu = !showMobileMenu">
</div>

//in your vue.js app
data: {
    showMobileMenu: false
}

Answer 6

I've got a solution that allows you to check for different values of a prop and thus different <th> elements will become active/inactive. Using vue 2 syntax.

<th 
class="initial " 
@click.stop.prevent="myFilter('M')"
:class="[(activeDay == 'M' ? 'active' : '')]">
<span class="wkday">M</span>
</th>
...
<th 
class="initial " 
@click.stop.prevent="myFilter('T')"
:class="[(activeDay == 'T' ? 'active' : '')]">
<span class="wkday">T</span>
</th>



new Vue({
  el: '#my-container',

  data: {
      activeDay: 'M'
  },

  methods: {
    myFilter: function(day){
        this.activeDay = day;
      // some code to filter users
    }
  }
})