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.
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 have a text field built right into a vuetify expansion panel.
After clicking the "rename box" icon
The issue is that every time I type a spacebar into the text box the expansion panel toggles. I have prevented the event propagation of a click by using click.stop="" attribute but I cant seem to prevent this space bar event from affecting the parent.
Attributes that I have tested are:
keydown.stop
keydown.prevent ('Cant type with this option')
keydown.self
keydown.capture
input.stop
change.stop
The following are the events emitted according to the vue plugin
Here is the code
<v-expansion-panel
active
v-for="(item, i) in $store.state.data"
:key="i"
>
<v-expansion-panel-header>
<div v-if="editorQ !== i">Q. {{ item.q }}</div>
<v-text-field
v-else
label="Question"
:value="newQuestion"
#click.stop=""
#change.stop="updateQ"
#keydown.stop=""
></v-text-field>
<template v-slot:actions>
<v-btn
v-if="editorQ === i"
#click.stop="doneEditingQuestion(i)"
depressed
icon
text
>
<v-icon> mdi-check </v-icon>
</v-btn>
<v-btn
class="upright"
v-else
#click.stop="editQuestion(i)"
depressed
icon
text
>
<v-icon> mdi-rename-box </v-icon>
</v-btn>
</template>
</v-expansion-panel-header>
<v-expansion-panel-content>
It was just trial and error for me, the following prevents the active toggle:
#click.stop
#keyup.prevent
when applied to the v-text-field within a v-expansion-panel-header.
Codepen
I am trying to put a dialog inside an autocomplete component
<v-autocomplete v-model="item.selected_item"
:items="items"
item-text="name"
return-object
single-line
#change="setItemId(item)"
>
<div slot="prepend-item">
<add-item></add-item>
</div>
</v-autocomplete>
the code for component <add-item>
<v-dialog persistent v-model="dialog" width="500">
<template v-slot:activator="{ on, attrs }">
<v-btn text block v-bind="attrs" v-on="on">{{__("Add Item")}}</v-btn>
</template>
<v-card>
</v-card>
</v-dialog>
now , the dialog button actually shows up inside the autocomplete , but the problem is that the dialog automatically goes of on any mouse click ,
I noticed that this is related somehow to the autocomplete component , I tried to put the <add-item> component outside of the autocomplete and it worked fine .
how can this be solved ?
Instead of putting the whole <add-item/> inside the autocomplete, you can separate the button and the dialog itself, then control the dialog whenever the button is clicked. We can base our solution at this example. We will declare a variable dialog that will control our add-item dialog's visibility. That variable will be handled by our button inside the autocomplete.
Main Component:
<v-autocomplete
...
>
<div slot="prepend-item">
<v-btn text block #click="dialog = true">{{"Add Item"}}</v-btn>
</div>
</v-autocomplete>
<add-item v-model="dialog"/> <!-- Pass the dialog variable to the add-item component -->
export default {
data: () => ({
items: [...],
dialog: false // let's close the dialog initially.
})
}
Add Item Component:
<v-dialog persistent :value="value" width="500">
<v-card>
...
<!-- To close the dialog, we'll need to use $emit() to
let our parent know that the value had changed. -->
<v-btn #click="$emit('input', false)">Close Dialog</v-btn>
</v-card>
</v-dialog>
export default {
props: ["value"], // Pass the value of the dialog from the main component
};
Notice that we used $emit() when we want to close our dialog. We need to use that because the variable that is controlling the dialog is from the main component, and the best way to change the value from add-item is by emitting a value. More explanation here.
Here is a demo.
Vuetify v-menu has open-on-hover property.
Using this, user can use menus using hover instead of clicking.
This hover menu close when itself clicked.
I want to set menu which have optional hidden area.
So, i need a hover menu can be clicked without closing.
Is there any way to do this?
thank you in advance.
this is my sample code.
<v-menu open-on-hover>
<template v-slot:activator="{ on }">
<span>hover menu</span>
</template>
<!-- v-menu content -->
<v-card>
<v-btn #click="hiddenarea = true">open</v-btn>
<!-- hiddenarea -->
<span v-if="hiddenarea">Here is hidden area</span>
</v-card>
</v-menu>
Menu Component -Vuetify.js
You can use close-on-content-click for that
<v-menu open-on-hover :close-on-content-click="false">
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
// ...
}
}
}