Vue.js – how toggle icon class on click Code Answer

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.

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.

Related Posts

Tutorial Guruji