如何解决Vue.js:无法在Vuetify中的应用栏中使用下拉按钮
我在<v-btn>
内有一个Vuetify <v-app-bar>
。
<template>
<v-app-bar>
<v-spacer></v-spacer>
<v-btn color="primary">
Menu
</v-btn>
</v-app-bar>
</template>
我正在尝试使此特定按钮成为下拉菜单。为此,我尝试使用激活器道具将该按钮封装在<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>
但是当我这样做时,按钮就消失了。
解决方法
要将按钮用作下拉菜单的激活器,您必须用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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。