插槽处于活动状态时如何切换图标

Question

我正在使用 Vuetify v-menu 来显示国家选择。 v-chip 标题旁边是一个向下的人字形。当我点击芯片激活菜单时，我希望 V 形变为向上 V 形。我想在插槽处于活动状态时切换 v-icon。我已经尝试过各种风格，我可以发誓我从一个工作项目中获得了这段代码。但是图标永远不会改变。

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

如果 on 是事件，我如何获得 isActive 属性？

Answer 1

activator 有另一个属性称为布尔值：

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

插槽处于活动状态时如何切换图标

How to toggle icon when slot is active

vue.js

vuetify.js