Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Vue.js – how toggle icon class on click without wasting too much if your time.
The question is published on by Tutorial Guruji team.
The question is published on by Tutorial Guruji team.
Here’s a snippet of my code in which on page load my div is collapsed and the icon initial class is set to ‘fa fa-chevron-up’. How do I toggle the icon’s class to ‘fa fa-chevron-down’ when a is clicked?
var vue = new Vue({
el: '#vue-systemActivity',
data: {
loading:false,
collapsed: true
}
});.is-collapsed{
display: none;
}<a v-on:click=" collapsed = !collapsed" class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>Answer
Use :class binding:
<i :class="[collapsed ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"
We are here to answer your question about Vue.js – how toggle icon class on click - If you find the proper solution, please don't forgot to share this with your team members.