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>
Related
I have a piece of working code from Veutify 1.5.6 that includes an icon inside of a data table that, when clicked, displays a menu. When clicked the activator shows the list that was activated.
I have a codepen with this example
I want the same functionality, but Vuetify 2 does not have slot="activator".
It looks like they use v-slot:activator="{ on }" with a template tag, but I can't get this replicated over.
This is my attempt at it.
<v-data-table
:headers="labels"
:items="data"
>
<template v-slot:[`item.statusIcon`]="{ item }">
<td style="cursor: pointer;">
<v-icon :class="item.status">{{item.statusIcon}}
<template v-slot:activator="{ on }">
<v-list>
<v-list-item
v-on="on"
v-for="(status, index) in statusItems"
:key="index"
:class="status.title"
#click="setStatus(item, status.title)"
>{{ status.title }}></v-list-item>
</v-list>
</template>
</v-icon>
</td>
</template>
</v-data-table>
There's definitely something small I'm missing and I know that the v-icon should be under the template, but I keep getting this error
'v-slot' directive must be owned by a custom element, but 'td', 'div', 'template' is not
I found this thread, but still no help.
Any help would be appreciated
You should wrap the icon with v-menu component then use this icon as menu activator :
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-icon v-on="on" :class="item.status">{{item.statusIcon}}
</v-icon>
</template>
<v-list>
<v-list-item
v-for="(status, index) in statusItems"
:key="index"
:class="status.title"
#click="setStatus(item, status.title)"
>{{ status.title }}></v-list-item>
</v-list>
</v-menu>
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
I am building a split-button like this one: https://codepen.io/mtermoul/pen/KKMPqvd,
<v-btn-toggle>
<v-btn>Edit Avatar</v-btn>
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn v-on="on" v-bind="attrs"><v-icon>arrow_drop_down</v-icon></v-btn>
</template>
<v-list>
<v-list-item>
<v-list-item-title>Copy from local</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-btn-toggle>
But I don't want the buttons to remain in toggle state after the user clicks them.
Any idea about how to disable that behavior in the v-btn-toggle?
v-btn-toggle have active-state which you cannot disable, till now no support for this feature. You can use the following code
<v-item-group class="v-btn-toggle">
<v-btn>Edit Avatar</v-btn>
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn v-on="on" v-bind="attrs"><v-icon>arrow_drop_down</v-icon></v-btn>
</template>
<v-list>
<v-list-item>
<v-list-item-title>Copy from local</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>Upload</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>Delete</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-item-group>
Paste it in your codepen and its working as expected.
Whenever you face similar problems inspect the element and identify the css attribute that is giving it the style:
This should do:
.theme--light.v-btn--active::before,
.theme--light.v-btn--active:hover::before,
.theme--light.v-btn:focus::before {
opacity: 0 !important;
}
I'm making a web application which contains a navigation drawer, the intention was that the navigation drawer was open by default, and if the screen size changes to a smaller one it should close, if it is changed back to the big screen size it should reopen, but it's currently not working.
i have tried using the break points($vuetify.breakpoint.lgAndUp) and v-model but it doesn't seems to work.
<template>
<!--Start of template layaout-->
<v-layout wrap row>
<!--End of template layout-->
<v-app-bar color="grey lighten-2" light height="80" app clipped-left>
<v-app-bar-nav-icon x-large #click.stop="draw = !draw"></v-app-bar-nav-icon>
<v-img
src="http://logo-load.com/uploads/posts/2016-02/1455472802_logo.png"
lazy-src="http://logo-load.com/uploads/posts/2016-02/1455472802_logo.png"
aspect-ratio="1"
max-width="60"
max-height="60"
class="appTitle"
#click="pushToken('Home')"
></v-img>
<v-toolbar-title class="text-uppercase">
<span #click="pushToken('Home')"> Tools</span>
</v-toolbar-title>
<!--Spacer to keep buttons to the right side-->
<v-spacer></v-spacer>
<!--Apps menu button-->
<!--Apps menu start-->
<v-menu offset-y max-width="200" min-width="200">
<template v-slot:activator="{ on: menu }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn text v-on="{ ...tooltip, ...menu }">
<v-icon large>apps</v-icon>
</v-btn>
</template>
<span>Applications</span>
</v-tooltip>
</template>
<v-list>
<v-list-item v-for="(app, index) in apps" :key="index" class="appDecor">
<v-btn :color="app.color" dark>{{app.title}}</v-btn>
</v-list-item>
</v-list>
</v-menu>
<!--Apps menu end-->
<!--Menu template for list menu-->
</v-app-bar>
<!--Log out Dialog-->
<v-dialog v-model="dialog" max-width="350px" transition="dialog-transition">
<v-card>
<v-card-title>Are you sure you want to exit?</v-card-title>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="info" #click="logOut()">yes</v-btn>
<v-spacer></v-spacer>
<v-btn color="info" #click="dialog = false">no</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
<!--Dialog-->
<!--Nav drawer start-->
<v-navigation-drawer
v-model="draw"
color="grey lighten-2"
absolute
:clipped-left="$vuetify.breakpoint.lgAndUp"
>
<v-layout row wrap>
<v-container grid-list-xs>
<v-list dense nav>
<v-list-item v-for="item in items" :key="item.id" link>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<span #click="pushToken(item.link)">{{ item.param }}</span>
</v-list-item-content>
</v-list-item>
</v-list>
</v-container>
</v-layout>
<template v-slot:append>
<v-btn #click="dialog = true" block class="my-5">
<v-icon left>exit_to_app</v-icon>Log out
</v-btn>
</template>
</v-navigation-drawer>
<!--Nav drawer end-->
</v-layout>
</template>
i expected the nav drawer being open by default, closing o smaller screens and reopening if changing the screen size to a bigger one, but the actual result is, the drawer open by default and keeps open if the screen size changes(and also a screen overlay is displayed on small screen),if i close it manually it won't open itself when changing between screen sizes.
If you want to find bugs, you should give the relevant code which controls the nav drawer changes.
Simple solution: v-show and change nav drawer's display
for examle:
`
<template>
<v-app>
<v-content>
<div v-show='is_hide_text' ref='text'>
<p>some text</p>
</div>
<button #click='hide_content'>hide_content</button>
</v-content>
</v-app>
</template>
<script>
import HelloWorld from './components/HelloWorld';
export default {
name: 'App',
data: () => ({
//
}),
computed:{
is_hide_text(){
return this.$vuetify.breakpoint.mdAndUp
}
},
methods:{
hide_text(){
this.$refs['text'].style.display = 'none'
}
}
};
</script>
`
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>