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