There is an example in Vutetify documentation (https://vuetifyjs.com/en/components/date-pickers/#dialog-and-menu). That example has next template code snippet:
...
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
:return-value.sync="date"
transition="scale-transition"
offset-y
min-width="auto"
>
...
<v-date-picker
v-model="date"
no-title
scrollable
>
...
<v-btn
text
color="primary"
#click="$refs.menu.save(date)"
>
OK
</v-btn>
</v-date-picker>
</v-menu>
It looks like that when a button click ( #click="$refs.menu.save(date)" ) occurs, some 'save' method of the v-menu component is called. But where is it possible to see information about Vuetify component methods and particularly about that menu save method?
The save() method is provided by the Returnable mixin, which allows control over the value returned by the return-value property.
You can see its source code here.
Related
I'm working with Vue.js 2 and Vuetify 2.2.28 (I've already tried to upgrade in Vuetify 2.6 but I have the same issue), I'm trying to apply the "attach" property to the v-menu of a v-date-picker, to keep the calendar attach to his input when I scroll the dialog.
The attach property works on my datepickers outside the dialog, and it also work on my v-select inside the dialog, but I don't understand why it doesn't work with my datepickers inside the dialog :
<v-col md="8">
<v-menu
ref="menuDateEnd"
v-model="addEndDateTrigger"
:close-on-content-click="false"
transition="scale-transition"
max-width="290"
attach
>
<template v-slot:activator="{ on }">
<v-text-field
:value="addUserForm.endDate | date"
label="Date de fin"
readonly
color="ilgprimary"
v-on="on"
hide-details
clearable
#click:clear="clearAddDateEnd"
/>
</template>
<v-date-picker v-model="addUserForm.endDate" scrollable locale="fr" color="ilgprimary" header-color="ilgsecondary" #change="checkEndDate()">
</v-date-picker>
</v-menu>
</v-col>
I've also tried to put an ID to my v-col and attach the datepicker to it doing attach="#my-col-id" but it doesn't work too.
Someone know how to fix this please ?
I'm trying to open a little popup floating menu when an element is clicked with Vuetify (2.5.0) and Vue (2.6.12) e.g.
<v-menu bottom offset-y>
<template v-slot:activator="{ on, attrs }">
<div v-bind="attrs" v-on="on"></div>
</template>
<div>My popup floating content..</div>
</v-menu>
...but I'm not sure how the activator should work with the click event. I'm not using v-btn as the activator for a reason. The vuetify docs give examples, but they always use v-btn e.g. instead of the div in the activator slot above, it's <v-btn v-bind="attrs" v-on="on">A Menu</v-btn>.
You could destruct the on slot prop to get the click event and then use it in your div :
<v-menu bottom offset-y>
<template v-slot:activator="{ on:{click}, attrs }">
<div v-bind="attrs" #click="click">show menu</div>
</template>
<div>My popup floating content..</div>
</v-menu>
I have a menu dialog inside a table column to update a corresponding value.
The menu dialog when opened shows a card with a select box and update button.
The menu is activated using v-on which works exactly as intended but I have no way of closing the menu.
Since it's inside a table, using a v-model and changing the value causes multiple menus/select boxes to be shown to be opened.
<v-menu :close-on-content-click="false" :close-on-click="false">
<template v-slot:activator="{ on: { click } }">
<v-chip #click="click" small>{{item[header.value]}}</v-chip>
</template>
<v-card>
<!-- <v-card-title class="subtitle-2 pb-0 pt-1">Update Status</v-card-title> -->
<v-select items="Status" class="px-4 pb-2" hide-details label="Status"></v-select>
<v-card-actions>
<!-- <v-spacer></v-spacer> -->
<v-btn color="primary" #click="" text>Update</v-btn>
<v-btn color="warning" text>Cancel</v-btn>
</v-card-actions>
</v-card>
</v-menu>
How can I close the menu without using a v-model?
It was an easy solution...
I added a v-model to the menu dialog and created an object in data display: {}. The v-model on the menu dialog was v-model="display[item.id]" using the item id as an index of sorts and then I could just use a method to close it.
close(id) {
this.display[id] = false;
},
Done.
I want to add a v-tooltip to the v-btn I'm using to trigger the datepicker for a my charting application. Here is code that is working, before attempting to integrate the tooltip.
<v-menu ref="menu" v-model="menu"
:close-on-content-click="true"
:return-value.sync="date"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-btn v-on="on"
:style="{left: '50%', transform:'translateX(-50%)'}"
light
icon
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
</template>
<v-date-picker
v-model="date"
no-title
scrollable
>
</v-date-picker>
</v-menu>
With the above, I click the button, I get the datepicker, all is good. I have tried a bunch of different ways to add a v-tooltip, e.g. wrapping the whole block, wrapping just the template and wrapping just the button. Wherever I place the tooltip code, it breaks the whole setup in that either the button doesn't show or the click on it isn't processed.
Buttons being ideal for tooltips, to reveal their functionality without having to click to find out, this seems like a reasonable thing to do. It is easy to use v-btn to trigger lists, but I find very few examples of people using buttons to display datepickers, even though lots of people are asking questions online about it. I'm hoping there is a technique for tooltips that can be used with a variety of pickers actuated from .
Any ideas?
Fixed it for you, try now:
Demo: https://codepen.io/aQW5z9fe/pen/vYNdJwO?editors=1010
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on: menu }">
<v-tooltip bottom>
<template v-slot:activator="{ on: tooltip }">
<v-btn
v-on="{ ...tooltip, ...menu }"
:style="{left: '50%', transform:'translateX(-50%)'}"
light
icon
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
</template>
<span>Tooltip</span>
</v-tooltip>
</template>
<v-date-picker
v-model="date"
no-title
scrollable
>
</v-date-picker>
</v-menu>
I have created a dropdown menu in vuetify which looks like this:
[![enter image description here][1]][1]
`
<v-menu offset-y>
<template v-slot:activator="{ on }">
<v-btn text v-on="on">
Details
</v-btn>
</template>
<v-list>
<v-list-item>
<v-form ref="form">
<v-radio-group v-model="metrics" required>
<v-radio
label="ABC"
value="abc"
></v-radio>
<v-radio label="XYZ" value="xyz"></v-radio>
</v-radio-group>
<v-divider></v-divider>
<v-radio-group v-model="order" required>
<v-radio
label="Higher"
value="higher"
></v-radio>
<v-radio
label="Lower"
value="lower"
></v-radio>
</v-radio-group>
<v-divider></v-divider>
<v-btn
#click="
sortTableData(
metrics,
order,
$props.tableItems
)
"
>
Apply
</v-btn>
</v-form>
</v-list-item>
</v-list>
</v-menu>`
however,
when I click the Dropdown and select for eg:Installs, the menu
closes..
I have to click the Dropdown again to choose higher/lower..
and the menu closes again..
And again I have to click the Dropdown to Click "Apply" button.
Question : Is there Any way I can hold this menu until I click "Apply"?
Thanks a lot in advance for your help !
Ok, the idea here is to manually handle the dropdown visibility instead of letting Vuetify controls this.
To do so, you need to:
add a :close-on-content-click="false" on your <v-menu> (doc)
add a v-model directive binded to a "data" boolean value (ex: v-model="isDropdownDisplayed"), initialized to false (closed dropdown at load)
The first prop tells Vuetify to not close the dropdown when clicking on content (only an outside click will do it), while the second prop is linking the dropdown visilibity to your custom data boolean value.
As your "data" boolean value is initialized to false (closed dropdown) and is automatically updated to true via the v-model when opening the dropdown, the left thing to do is to pass this value to false on your sortTableData method.
Assuming you're using SFC (but the approach is the same for pure JS components):
Template
<v-menu offset-y :close-on-content-click="false" v-model="isDropdownDisplayed">
...
</v-menu>
Script
{
name: 'MyComponent',
data: function () {
return {
isDropdownDisplayed: false
}
},
methods: {
sortTableData: function (/* args */) {
// ...
this.isDropdownDisplayed = false
// ...
}
}
}