Issue
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.
Solution
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
}
}
})
Answered By - Douglas.Sesar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.