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>

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>

• javascript
• jquery
• html
• vue.js

1 Answer 1

Use :class binding:

<i :class="[collapsed ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"