如何用Vue+Vuetify实现菜单展开时chevron上翻、收起时下翻的效果？

问题根源 #

你之前的方案不生效有两个核心原因：

• 自行维护布尔值的方案没有监听菜单的外部关闭事件，点击外部关闭时状态不会同步更新
• attrs['aria-expanded']属于非响应式的原生DOM属性集合，值变化不会触发Vue视图重渲染，所以控制台能看到属性变化但图标不切换

最简解决方案 #

Vuetify 的 v-menu 组件的 activator 作用域插槽本身就暴露了响应式的激活状态变量 value，直接用这个变量判断即可，无需自己维护状态，不管是点击按钮切换还是点击外部区域关闭，value 都会自动同步更新。

修正后的完整代码如下：

<v-menu offset-y>
  <!-- 解构插槽暴露的响应式状态 value -->
  <template v-slot:activator="{on, attrs, value}">
    <v-btn
      class="mt-6 v-btn--glow"
      color="primary"
      dark
      v-bind="attrs"
      v-on="on"
    >
      Dropdown
      <v-icon v-if="value" right>mdi-chevron-up</v-icon>
      <v-icon v-else right>mdi-chevron-down</v-icon>
    </v-btn>
  </template>
  <v-list>
    <v-list-item>
      <v-list-item-title>$ Fees & Rates</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

你也可以通过动态绑定图标名简化代码，不用写两个 v-icon 标签：

<v-icon right>{{ value ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>

另外你示例代码中的列表闭合标签存在笔误，把</v-list>误写为</v-list-item>，可以一并修正。

内容的提问来源于stack exchange，提问作者Nathan Thomas