I have a list of label and vue-color (compact-picker) like this
Result 1
<v-list>
<v-list-tile
v-for="sport in filterSports(conso.sports)"
:key="sport.number"
#click="sportSelected(sport.number)"
:class="{'d-none': displaySport(sport)}">
<v-list-tile-action>
<v-dialog width="300">
<v-btn
flat
slot="activator"
color="grey">
<v-icon
:color="findIconColor(sport.number).color">lens
</v-icon>
</v-btn>
<v-card>
<v-card-title
class="subheading grey lighten-2"
primary-title>
Color picker
</v-card-title>
<v-card-text>
<compact-picker v-model="colors"
#input="setDepColor($event, sport.number)"></compact-picker>
</v-card-text>
<v-card-actions>
<v-layout
align-center
justify-end>
<v-btn #click="closeDialog">
<v-icon class="mr-1">done</v-icon>
</v-btn>
</v-layout>
</v-card-actions>
</v-card>
</v-dialog>
</v-list-tile-action>
<v-list-tile-content
:class="{ 'grey--text': isSelected(sport)}">
{{sport.label}}.
</v-list-tile-content>
</v-list-tile>
</v-list>
How can i close "this" dialog on click btn with #click=closeDialog ?
When i click outside the dialog, this dialog closes alone.
I tried with v-model, but when i click on icon for open dialog, vue open all dialogs instead...
You are probably using the same variable for all v-dialog and that's why they are all started at the same time.
You need on var for each
<v-dialog width="300" v-model="sport.show">
and then in on the close button
<v-btn #click="sport.show = false">
Related
i wondering why when i use v-dialog in v-for and i try to reopen and re close dialog in many times
it will take firefox down,firefox hang and i have to close firefox
this is the code
<template>
<v-row>
<v-col v-for="n in 6" :key=n>
<v-card
>
<v-card-actions>
<div class="text-center">
<v-dialog
v-model="dialog"
width="500"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
>
Click Me
</v-btn>
</template>
<v-card>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
text
#click="dialog = false"
>
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</template>
and this is the scrip code, is only return for v dialog
<script>
export default {
data(){
return {
dialog: false
}
}
}
</script>
that code above is pure v-dialog vuetify, i only put that in card
You've to move the v-dialog out the loop :
<template>
<v-row>
<v-dialog
v-model="dialog"
width="500"
>
<v-card>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
text
#click="dialog = false"
>
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-col v-for="n in 6" :key=n>
<v-card
>
<v-card-actions>
<div class="text-center">
<v-btn
color="primary"
#click.stop="dialog=true"
>
Click Me
</v-btn>
</div>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</template>
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
I'd like to have some dialog/panel to place my login form. There will be login button in top toolbar and on click some type of non-modal dialog will pop-up below the toolbar containing login form and register link. Something like the real Google contats do for login.
But I don't have any idea how to clip/show the some panel under the toolbar. I even don't know which one to use should it be v-dialog? I should look somehing like below. I just found this where they just position it manually, but anyway it is still modal even if I will get the CSS positioning right.
I should use v-menu with slot="activator" like in this example
<template>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card height="200px">
<v-card-title class="blue white--text">
<span class="headline">Menu</span>
<v-spacer></v-spacer>
<v-menu bottom left>
<v-btn
slot="activator"
dark
icon
>
<v-icon>more_vert</v-icon>
</v-btn>
<v-list>
<v-list-tile
v-for="(item, i) in items"
:key="i"
#click=""
>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-card-title>
<v-card-text>Lorem Ipsum</v-card-text>
</v-card>
</v-flex>
</v-layout>
</template>
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>