Vuetify v-menu插槽激活时如何切换v-icon图标

解决方法 #

Vuetify的v-menu activator插槽本身就提供了isActive属性用来标识菜单是否处于激活状态，你之前只解构了事件对象on，补全解构获取isActive即可实现图标切换：

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

问题原因说明 #

你之前代码里判断的on是插槽提供的事件绑定集合，本身永远为真值，所以v-if="on"的判断永远成立，图标不会发生切换。

内容的提问来源于stack exchange，提问作者Connie DeCinko