I am trying to show a edit button and then open a dialog box on cliking using mouseenter and mouseleave. On entering the edit button is displayed but as soon as i click on it it's getting hide.
Can someone tell me what i am doing wrong here. The edit button is inside the DueDateAddM component.
<v-card-title class="mx-5">{{dayjs(key).format('DD MMM YYYY')}}</v-card-title>
<v-col v-for="(item, i) in value" :key="i">
<v-card-text
class="black--text py-0"
#mouseenter="item.isEdit=true"
#mouseleave="item.isEdit=false"
>
<v-row>
<span v-if="!item.isEdit" class="grey--text mr-1">#{{item.id}}</span>
<span
v-show="isLoggedIn"
v-if="item.isEdit"
class="mr-1"
#click="editDuedate"
>
<DuedateAddM :propItem="item" :duedateId="item.id" />
</span>
{{item.descp}}
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-chip class="mx-1 py-0" small label v-on="on" v-if="item.previousdate">
<v-icon color="grey" small class="mr-1">fas fa-info-circle</v-icon>
<span>{{dayjs(item.previousdate).format("DD MMM YYYY")}}</span>
<span v-if="!item.previousdate">No Previous date found</span>
</v-chip>
</template>
<span>Previous Duedate</span>
</v-tooltip>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-chip small v-on="on" class="mx-1">
<v-icon color="grey" small class="mr-1">fas fa-tag</v-icon>
{{item.category}}
</v-chip>
</template>
<span>Category</span>
</v-tooltip>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-chip color="red lighten-4" small class="mx-1" v-on="on">
<v-icon color="grey" small class="mr-1">fas fa-map-marker-alt</v-icon>
{{item.region}}
</v-chip>
</template>
<span>Region</span>
</v-tooltip>
</v-row>
<v-row v-if="item.applicableto">
<v-subheader class="ml-1">Applicable To: "{{item.applicableto}}"</v-subheader>
</v-row>
<v-divider class="mt-2"></v-divider>
</v-card-text>
</v-col>
Use v-show instead of v-if
<span v-show="!item.isEdit" class="grey--text mr-1">#{{item.id}}</span>
<span
v-show="isLoggedIn"
v-show="item.isEdit"
class="mr-1"
#click="editDuedate"
>
<DuedateAddM :propItem="item" :duedateId="item.id" />
</span>
Related
In Vuetify, if I want to move my delete button closer to the expand button.
How do I do that ?
<v-expansion-panel-header>
{{ vehicle.VIN }}
<v-icon v-if="type == 'saved'" color="teal"> mdi-check </v-icon>
<v-btn
text
v-if="type == 'saved'"
color="red"
#click="remove(index, type)"
>
DELETE
</v-btn>
</v-expansion-panel-header>
You can reset the flex-grow property on the delete button using a Vuetify helper class.
class="flex-grow-0"
Snippet:
<div id="app">
<v-app>
<v-expansion-panel-header>
{{ vehicle.VIN }}
<v-icon v-if="type == 'saved'" color="teal"> mdi-check </v-icon>
<v-btn
class="flex-grow-0"
text
v-if="type == 'saved'"
color="red"
#click="remove(index, type)"
>
DELETE
</v-btn>
</v-expansion-panel-header>
</v-app>
</div>
Vuetify Docs: https://vuetifyjs.com/en/styles/flex/#flex-grow-and-shrink
It can also be achieved using row and column-
<v-expansion-panel-header>
<v-row no-gutters>
<v-col>
hello
</v-col>
<v-col>
<v-icon color="teal"> mdi-check </v-icon>
</v-col>
<v-col align="right">
<v-btn text color="red">
DELETE
</v-btn>
</v-col>
</v-row>
</v-expansion-panel-header>
i have a v-menu on toolbars right corner. The menu displays as bottom right (end) so half the card is outside the view. I want to change to bottom left (start) however i can't seem to make it work.
<v-menu
location="start"
rounded
>
<template v-slot:activator="{ props }">
<v-btn
icon
v-bind="props"
>
<v-avatar
color="brown"
size="large"
>
<span class="white--text text-h5">{{ user.initials }}</span>
</v-avatar>
</v-btn>
</template>
<v-card>
<v-card-text>
<div class="mx-auto text-center">
<v-avatar
color="brown"
>
<span class="white--text text-h5">{{ user.initials }}</span>
</v-avatar>
<h3>{{ user.fullName }}</h3>
<p class="text-caption mt-1">
{{ user.email }}
</p>
<v-divider class="my-3"></v-divider>
<v-btn
rounded
variant="text"
#click="() => goSettings() "
>
Settings
</v-btn>
<v-divider class="my-3"></v-divider>
<v-btn
#click="() => logOut()"
>
Disconnect
</v-btn>
</div>
</v-card-text>
</v-card>
</v-menu>
I'm missing somethings? im checking the example in the docs https://next.vuetifyjs.com/en/components/menus/
thanks
edit: added screenshots of current behaviour vs expected
Edit 2: I tried the v-menu on a codepen and works as intended, however for some reason, it does not work inside a v-app-bar
Try using prop "anchor" instead of "location".
<v-menu
anchor="bottom end"
rounded
>
<template v-slot:activator="{ props }">
<v-btn
icon
v-bind="props"
>
<v-avatar
color="brown"
size="large"
>
<span class="white--text text-h5">{{ user.initials }}</span>
</v-avatar>
</v-btn>
</template>
<v-card>
<v-card-text>
<div class="mx-auto text-center">
<v-avatar
color="brown"
>
<span class="white--text text-h5">{{ user.initials }}</span>
</v-avatar>
<h3>{{ user.fullName }}</h3>
<p class="text-caption mt-1">
{{ user.email }}
</p>
<v-divider class="my-3"></v-divider>
<v-btn
rounded
variant="text"
#click="() => goSettings() "
>
Settings
</v-btn>
<v-divider class="my-3"></v-divider>
<v-btn
#click="() => logOut()"
>
Disconnect
</v-btn>
</div>
</v-card-text>
</v-card>
</v-menu>
I can't even tell you why this could work, because I wasn't able to find it in the Docs or Files, but it is used like that in one of the templates I'm using.
However, this only works for large screens, on mobile the card will be outside the view again.
I had the same problem, the solution is using the activator prop or perhaps, in your case you sould use the internal-activator prop.
<v-menu
location="start"
rounded
internal-activator
>
<template v-slot:activator="{ props }">
<v-btn
icon
v-bind="props"
>
<v-avatar
color="brown"
size="large"
>
<span class="white--text text-h5">{{ user.initials }}</span>
</v-avatar>
</v-btn>
</template>
<v-card>
<v-card-text>
<div class="mx-auto text-center">
<v-avatar
color="brown"
>
<span class="white--text text-h5">{{ user.initials }}</span>
</v-avatar>
<h3>{{ user.fullName }}</h3>
<p class="text-caption mt-1">
{{ user.email }}
</p>
<v-divider class="my-3"></v-divider>
<v-btn
rounded
variant="text"
#click="() => goSettings() "
>
Settings
</v-btn>
<v-divider class="my-3"></v-divider>
<v-btn
#click="() => logOut()"
>
Disconnect
</v-btn>
</div>
</v-card-text>
</v-card>
</v-menu>
I attempted doing this like in the documentation
https://vuetifyjs.com/en/components/tooltips/
<v-tooltip color="black" bottom >
<template v-slot:activator="{ on, attrs }">
<v-switch
v-model="boo"
v-bind="attrs"
v-on="on"
inset
>
</v-switch>
</template>
<div>
Tooltip
</div>
</v-tooltip>
here :
https://codepen.io/julienreszka/pen/BazvmYN
But the tooltip isn't displayed and the css is wrong.
not really sexy, but you can wrap your switch in a div
<div
v-on="on"
v-bind="attrs">
<v-switch
v-model="boo"
></v-switch>
</div>
v-tooltip is label of v-switch
<v-switch
v-model="boo"
inset>
<template v-slot:label>
<v-tooltip color="black" bottom>
<template v-slot:activator="{ on, attrs }">
<span
v-bind="attrs"
v-on="on">switch label</span>
</template>
Tooltip
</v-tooltip>
</template>
</v-switch>
switches document
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>