Vue.js toggle class on click

Question

How does 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> tag 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.

Answer 1

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     }   } })