Vue.js：无法在 Vuetify 的应用栏中使用下拉按钮

Posted 2023-02-23

【中文标题】Vue.js：无法在 Vuetify 的应用栏中使用下拉按钮

【英文标题】：Vue.js: Unable to use a dropdown button inside a App Bar in Vuetify

【发布时间】：2020-12-18 09:43:25

【问题描述】：

我在 <v-app-bar> 中有一个 Vuetify <v-btn>。

<template>
    <v-app-bar>
        <v-spacer></v-spacer>

        <v-btn  color="primary">
            Menu
        </v-btn>
    </v-app-bar>
</template>

我正在尝试将此特定按钮设为下拉菜单。为此，我尝试将此按钮封装在带有 activator 属性的 <template> 中。

<template>
    <v-app-bar>
        <v-spacer></v-spacer>

        <template v-slot:activator=" on, attrs "> 
            <v-btn  color="primary" v-bind="attrs" v-on="on">
                Menu
            </v-btn>
        </template>
    </v-app-bar>
</template>

但是当我这样做的那一刻，按钮就消失了。

【参考方案1】：

要使按钮成为下拉菜单的激活器，您必须用v-menu 组件包装该模板，然后添加项目列表：

<template>
    <v-app-bar>
        <v-spacer></v-spacer
<v-menu>
      <template v-slot:activator=" on, attrs ">
        <v-btn
          color="primary"
          dark
          v-bind="attrs"
          v-on="on"
        >
         Menu
        </v-btn>
      </template>
  <v-list>
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
          @click=""
        >
          <v-list-item-title> item.title </v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
 </v-menu>

    </v-app-bar>
</template>

更多详情请查看this