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" >
    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?

CodePudding user response：

activator has another property called value which is boolean :

<template v-slot:activator="{ on,value }">
  <v-chip label v-on="on" >
    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>