CODEWITHSUNDEEP
vue.jsvuetify.js
Connie DeCinko
Connie DeCinko

Reputation: 902

How to toggle icon when slot is active

I'm using a Vuetify v-menu to display a choice of country. Next to the v-chip title is a down chevron. When I click the chip to activate the menu, I want the chevron to change to an up chevron. I want to toggle the v-icon when the slot is active. I've tried various flavors and I could swear I got this code off a working project. But the icon never changes.

<template v-slot:activator="{ on }">
  <v-chip label v-on="on" class="mr-2">
    U.S. CANADA &amp; CROSS BORDERS
    <v-icon right v-if="on">mdi-chevron-up</v-icon>
    <v-icon right v-else>mdi-chevron-down</v-icon>
  </v-chip>
</template>

If on is the event, how do I get at the isActive property?

Upvotes: 2

Views: 674

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

activator has another property called value which is boolean :

<template v-slot:activator="{ on,value }">
  <v-chip label v-on="on" class="mr-2">
    U.S. CANADA &amp; CROSS BORDERS
    <v-icon right v-if="value">mdi-chevron-up</v-icon>
    <v-icon right v-else>mdi-chevron-down</v-icon>
  </v-chip>
</template>

Upvotes: 1

Related Questions