CODEWITHSUNDEEP
javascriptvue.jsswitch-statementiconsbootstrap-vue
karimlo
karimlo

Reputation: 171

How to toggle material design icons in Vue JS with a conditional statement?

I am toggling the text inside a button, but I want to toggle icons instead. this is the code I have.

<b-button size="sm" @click="row.toggleDetails" class="mr-2">
  {{ row.detailsShowing ? '-' : '+'}} Details
</b-button>

I want to use the icons as the trigger for the toggle. Click on the chevron down to expand and the chevron up to collapse.

<i class="mdi mdi-chevron-down"></i>
<i class="mdi mdi-chevron-up"></i>

How do I change that? Everything I am trying is breaking. Thanks

Upvotes: 1

Views: 1346

Answers (1)

Dipen Shah
Dipen Shah

Reputation: 26075

<b-button size="sm" @click="row.toggleDetails" class="mr-2">
  <b-icon :icon="row.detailsShowing ? chevron-up : chevron-down"></b-icon> 
  Details
</b-button>

Upvotes: 4

Related Questions