I'm using this exact code from the documentation
<div class="d-flex justify-center align-center">
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on"> Dropdown </v-btn>
</template>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
to render it
but sadly, I'm getting it
the dropdown button is completely invisible
I'm using the Vuetify version 2.3.6
Related
I have a Vuetify v-menu on my App.vue, which appears on every page. When loading a page for the first time, it correctly expands (the menu is used for options such as Sign Out, Account Settings etc). When I navigate to another component (using Vue router), the v-menu does not expand when the new page is loaded. It doesn't work even if I click it (not just hover). What could be the cause of this?
...
<div v-if="signedIn" class="text-center hideOnMobile">
<v-menu
open-on-hover
bottom
offset-y
>
<template v-slot:activator="{ on, attrs }">
<v-btn
elevation='0'
color="primary"
dark
v-bind="attrs"
v-on="on"
class="userDropDown"
>
{{ username }}
<v-icon dark left>mdi-chevron-down</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(item, index) in items"
#click="selectSection(item.title)"
:key="index"
>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
...
<router-view :uid='this.uid' :username='this.username' :userData='this.userData'></router-view>
I've been trying to implement a v-menu on a v-btn that as v-for. It works fine without v-for. I'm retrieving the category name using axios. So dont mind that. I just want the v-menu to work like that.
<div class="text-center">
<v-menu
:close-on-content-click="false"
:nudge-width="200"
offset-x
>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="indigo"
dark
v-bind="attrs"
v-on="on"
:value="categoryid"
v-for="(categoryItem, i) in categoryList" :key="i"
#click="subcat(categoryItem._id)"
>
{{ categoryItem.cname }}
</v-btn>
</template>
<v-card>
<v-list>
<v-list-item>
<v-list-item-avatar>
<img
src="https://cdn.vuetifyjs.com/images/john.jpg"
alt="John"
/>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>John Leider</v-list-item-title>
<v-list-item-subtitle
>Founder of Vuetify</v-list-item-subtitle
>
</v-list-item-content>
<v-list-item-action>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
<v-divider></v-divider>
</v-card>
</v-menu>
</div>
I have some problems with my Vue.js Project.
Parent Component:
<v-menu>
<template v-slot:activator="{ on }">
<more-actions :ref="'moreActions' v-on="on" />
</template>
<v-list>
<v-list-item #click="handleClick()">
<v-list-item-title>
Sample
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
MoreActions Component
<template>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn icon v-on="on" #click="$emit('click', $event)">
<v-icon small>
more_vert
</v-icon>
</v-btn>
</template>
<span>More Actions</span>
</v-tooltip>
</template>
This code is running well(under Vuetify v2.1.9), but doesn't run in Vuetify v2.1.15
(The menu is opend the top left corner.)
How can I fix this?
Here is running code in v2.1.15
<template>
<div class="text-center">
<v-menu>
<template v-slot:activator="{ on: menu }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn icon v-on="{ ...tooltip, ...menu }" #click="$emit('click', $event)">
<v-icon small>
more_vert
</v-icon>
<v-btn>
</template>
<span>Im A ToolTip</span>
</v-tooltip>
</template>
<v-list>
<v-list-item #click="handleClick()">
<v-list-item-title>
Sample
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</template>
Please help me.
move this part to the parent component.
and using <slot /> instead of this part in Child Component.
<v-list>
<v-list-item #click="handleClick()">
<v-list-item-title>
Sample
</v-list-item-title>
</v-list-item>
</v-list>
This is my toolbar, and I have problems with the the first button/menu.
I want it, when highlighted to have the same look as when the other buttons are highlighted. I've tried with py-3 and py-2 class on the v-btn, but then it gets squeed or does not fill the entire toolbar erea.
<v-toolbar dark dense app color="blue-grey darken-2">
<v-toolbar-side-icon #click="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title class="text-uppercase">
<router-link :to="{ name: 'home' }" class="brand-logo white--text">
<span>Byte</span>
<span class="font-weight-light">[Gym]</span>
</router-link>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-menu v-if="user" offset-y transition="slide-y-transition" open-on-hover>
<template v-slot:activator="{ on }">
<v-btn flat v-on="on">
<v-icon>expand_more</v-icon><v-btn flat to="/training">Training</v-btn>
</v-btn>
</template>
<v-list>
<v-list-tile v-for="item in traininglinks" :key="item.text" router :to="item.route">
<v-list-tile-title>{{ item.text }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<v-btn flat to="/nutrition">Nutrition</v-btn>
<v-btn flat to="/about">About</v-btn>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-btn v-if="user" flat>{{user.email}}</v-btn>
<v-btn v-if="!user" icon to="/login">
<v-icon>account_circle</v-icon>
</v-btn>
<v-btn v-if="user" icon #click="logout">
<v-icon right>exit_to_app</v-icon>
</v-btn>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
<v-btn icon class="hidden-sm-and-up">
<v-icon>more_vert</v-icon>
</v-btn>
</v-toolbar>
I want it to look like the other buttons when they are active, but now its only a tiny box around it. I feels this should work out of the box?
Can't find an answer for this anywhere..
So the problem here is that you're putting a button inside of a button. If you remove the v-btn around Training then it works the way it's supposed to.
<template v-slot:activator="{ on }">
<v-btn flat v-on="on">
<v-icon>expand_more</v-icon>Training
</v-btn>
</template>
Working codepen here: https://codepen.io/CodingDeer/pen/rNBjLOJ?editors=1010
I want to add right click event for v-treeview to open menu but I fail. I created a version that can open menu when left click and the main code is
<v-treeview v-model="tree" :open="open" :items="items" activatable item-key="name" >
<template v-slot:label="{item, open, selected}">
<v-menu
:value="showMenu"
>
<template v-slot:activator="{ on }">
<v-btn
flat
:ripple="false"
class="ma-0 pa-0"
v-on="on"
>
<!--button icon-->
<v-icon v-if="!item.file">
{{ open ? 'mdi-folder-open' : 'mdi-folder' }}
</v-icon>
<v-icon v-else>
{{ files[item.file] }}
</v-icon>
<!--button text-->
{{item.name}}
</v-btn>
</template>
<v-list>
<v-list-tile v-for="menuItem in menuItems" :key="menuItem">
<v-list-tile-title>{{menuItem}}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</template>
</v-treeview>
Note: the source code can be run at https://codepen.io/lhuangjs/pen/axMpYJ
And I am confused with v-on="on" in activator slot so much and I get some info from https://github.com/vuetifyjs/vuetify/issues/6866. However I still cannot understand it. Is there any more clear explanation?
thanks!
You have to use #contextmenu on the tree nodes.
I have tried to achieve what you tried. https://codepen.io/anon/pen/QPoYOQ?editors=1010#anon-login
But to make the tree look good, you have to do some CSS adjustments. I'm not sure any element other than v-btn or v-card accepts the #contextmenu event handler.
<div id="app">
<v-app id="inspire">
<v-treeview v-model="tree" :open="open" :items="items" activatable item-key="name">
<template v-slot:label="{item, open, selected}">
<v-btn flat #contextmenu="show">
<!--button icon-->
<v-icon v-if="!item.file">
{{ open ? 'mdi-folder-open' : 'mdi-folder' }}
</v-icon>
<v-icon v-else>
{{ files[item.file] }}
</v-icon>
<!--button text-->
{{item.name}}
</v-btn>
</template>
</v-treeview>
<v-menu v-model="showMenu" :position-x="x" :position-y="y" absolute offset-y>
<v-list>
<v-list-tile v-for="menuItem in menuItems" :key="menuItem" #click="clickAction">
<v-list-tile-title>{{menuItem}}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-app>
</div>
you can popup a context menu by adding #contextmenu event in a label slot:
<v-treeview :items="files" dense open-on-click transition hoverable>
<template v-slot:prepend="{ item, open }">
<v-icon v-if="item.children">{{ open ? 'mdi-folder-open' : 'mdi-folder' }}</v-icon>
<v-icon v-else>{{ icon(item.basename) }}</v-icon>
</template>
<template v-slot:label="{ item }">
<div #contextmenu.prevent="right($event, item)">{{ item.basename }}</div>
</template>
</v-treeview>