i added Create component to v-dialog and i want the Create component reset when the v-dialog closes. How can i do?
<v-dialog v-model="dialog" width="800">
<template v-slot:activator="{ on, attrs }">
<v-btn depressed color="primary" v-bind="attrs" v-on="on" #click="dialog = true">
<v-icon color="white">mdi-plus-thick</v-icon>
<span class="ml-2">Cihaz Ekle</span>
</v-btn>
</template>
<Create />
</v-dialog>
Add a v-if on your component with the value used for toggle the dialog:
<v-dialog v-model="dialog" width="800">
<template v-slot:activator="{ on, attrs }">
<v-btn depressed color="primary" v-bind="attrs" v-on="on" #click="dialog = true">
<v-icon color="white">mdi-plus-thick</v-icon>
<span class="ml-2">Cihaz Ekle</span>
</v-btn>
</template>
<Create v-if="dialog"/>
</v-dialog>
Related
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
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>
I have the below template (no need to put the here for the purpose of this question):
<template>
<div>
<v-card :color="variant">
<v-card-actions>
<v-tooltip top>
<v-btn icon slot="activator" #click="openConsole">
<v-icon>computer</v-icon>
</v-btn>
<span>Console</span>
</v-tooltip>
<v-btn icon v-if="failed"><v-icon>bug_report</v-icon></v-btn>
<v-btn icon #click="show = !show">
<v-icon>{{ show ? 'expand_less' : 'expand_more' }}</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</div>
</template>
I want a tooltip to be shown whenever mouse hovers on the Console Icon button.
What am I missing here?
Is there an issue with tooltip on Icons inside v-card-actions ?
I looked at this reference https://codepen.io/anon/pen/MOLjVz?editors=1010 but couldn't apply it in my code
Perhaps you're using a newer vuetify version which has different syntax? Try this:
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn v-on="on" #click="openConsole" icon>
<v-icon>computer</v-icon>
</v-btn>
</template>
<span>Console</span>
</v-tooltip>
Check out Vuetify docs for more details
Found the solution myself:
need to add data-app attribute at the root div component:
<div data-app>
<v-card :color="variant">
<v-card-actions>
<v-tooltip top>
<template v-slot:activator="{ on }">
<v-btn v-on="on" #click="openConsole" icon>
<v-icon>computer</v-icon>
</v-btn>
</template>
<span>Console</span>
</v-tooltip>
<v-btn icon v-if="failed"><v-icon>bug_report</v-icon></v-btn>
<v-btn icon #click="show = !show">
<v-icon>{{ show ? 'expand_less' : 'expand_more' }}</v-icon>
</v-btn>
</v-card-actions>
</div>
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
Is there any way that I can select the date in datepicker with vuetify without clicking on the OK button. I need it to auto-close and save it to the text-field when i choose the date. Vuetify version is 0.16
<v-flex xs11 sm3>
<v-dialog
persistent
v-model="startmodal"
lazy
full-width
max-width="290px"
>
<v-text-field
slot="activator"
label="Start Date"
v-model="startdate"
prepend-icon="event"
required
></v-text-field>
<v-date-picker v-model="startdate" scrollable actions>
<template slot-scope="{ save, cancel }">
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat color="primary" #click="cancel">Cancel</v-btn>
<v-btn flat color="primary" #click="save">OK</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-dialog>
</v-flex>
**
Wrap Date picker into the menu and add this: :close-on-content-click="true"
Here is an example:
<v-menu
lazy
offset-y
full-width
:close-on-content-click="true"
v-model="menu"
transition="scale-transition"
:nudge-right="40"
max-width="290px"
min-width="290px"
>
<v-text-field
slot="activator"
label="Activation Date"
required
v-model="selectedDate"
prepend-icon="event"
readonly
></v-text-field>
<v-date-picker
show-current
class="mt-3"
v-model="selectedDate"
>
<template slot-scope="{ save, cancel }">
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat color="primary" #click="cancel">Cancel</v-btn>
<v-btn flat color="primary" #click="save">OK</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-menu>