I'm trying to put a <v-menu> within the header slot of a <v-data-table>.
This menu would then show filter options (v-autocomplete) for that column.
When the menu is clicked, I can't click the autocomplete to show its items, because then the menu closes.
Is this not possible in Vuetify?
I've tried passing :close-on-click="false" and :close-on-content-click="false"
For example (CodePen):
<v-data-table :items="desserts" :headers="headers">
<template #[`header.calories`]>
<v-menu top>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on"><v-icon>filter</v-icon></v-btn>
</template>
<v-autocomplete class="black" :items="headers" />
</v-menu>
</template>
</v-data-table>
You can use Event.stopPropagation(), it will prevents further propagation of the current event
Eg:
<v-autocomplete #click="clickOnAutocomplete" class="black" :items="headers" />
...
methods: {
clickOnAutocomplete(e) {
e.stopPropagation();
},
}
....
Related
From vuetify'e example, the icon shows up at right side of each row.
But when I making my own, the arrow showed up at the left side, I havent figured out how to control its position.
My code is like following
<v-data-table
:headers="headers"
:items="inputs"
item-key="id"
disable-pagination
dense
show-expand
single-expand
hide-default-footer
>
<template v-slot:[`item.value`]="{ item }">
<v-progress-linear
height="22"
></v-progress-linear
>
</template>
<template v-slot:expanded-item="{headers, item}">
<td :colspan="headers.length">
<InputDetails
:input="item"
/>
</td>
</template>
</v-data-table>
Added one more header into header list did the magic. { text: '', value: 'data-table-expand' },
I want to have a v-text-field inside of a v-tooltip so when a user is shown a tooltip they can enter information inside of the tooltip, but no clicks or input seem to register for the elements inside of the tooltip
<v-tooltip top :open-on-click="true" :open-on-hover="false">
<template v-slot:activator="{ on }">
<v-list-item-content v-on="on">
<v-list-item-title>Title</v-list-item-title>
<v-list-item-subtitle>Subtitle</v-list-item-subtitle>
</v-list-item-content>
</template>
<v-text-field></v-text-field>
</v-tooltip>
Actually tool-tips are used only for show some tips, so the all pointer events will be blocked by css pointer-events: none;, We need to override this style with our CSS.
see my working example here
Template
<v-tooltip v-model="show" top>
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon color="grey lighten-1">mdi-cart</v-icon>
</v-btn>
</template>
<span>Programmatic tooltip</span>
<v-text-field
label="Regular"
></v-text-field>
</v-tooltip>
CSS
.v-tooltip__content{
pointer-events: all;
}
The v-tooltip shows a disabled item when you hover, and the addition of events to this item will not work. You can achieve a similar effect v-menu.
<v-menu bottom right
:close-on-content-click="false">
<template v-slot:activator="{ on }">
<v-list-item-content v-on="on">
<v-list-item-title>Title</v-list-item-title>
<v-list-item-subtitle>Subtitle</v-list-item-subtitle>
</v-list-item-content>
</template>
<v-card class="pa-3">
<v-text-field hide-details v-model="textVal" #change="update"></v-text-field>
</v-card>
</v-menu>
methods: {
update(){
console.log(this.textVal)
}
}
Here is the snippet from the template for my view:
<v-card>
<v-card-text>
<v-treeview selectable hoverable :items="items" :open.sync="open">
<template v-slot:prepend="{ item }">
<v-icon>{{item.icon}}</v-icon>
</template>
<template v-slot:label="{ item }">
<v-badge :content="item.count">{{item.name}}</v-badge>
</template>
</v-treeview>
</v-card-text>
</v-card>
The badge is clipped vertically.
Is there a way to prevent clipping?
Found an easy solution. Add the following to the vue file.
<style lang="scss">
.v-treeview-node__content {
line-height: 4;
}
</style>
<v-badge :content="item.count" inline>{{item.name}}</v-badge>
Adding inline prop to v-badge solves the problem. Please have a look here.
I have a vuetify tab component which includes a menu and a lot of different tabs which can show up in a random order. It seems like the v-tab toggling works via index-based. How can a vuetify v-tab be toggled to the correct tab via key/unique Id?
Example:
<v-tabs v-model="tab">
<v-tab href="#tab-myUniqueKeyOne">TEST ONE</v-tab>
<v-menu>
<template v-slot:activator="{ on }">
<v-btn text v-on="on">DROPDOWN_TAB</v-btn>
</template>
<v-list>
<v-list-item #click="changeToTab('tab-foo')">Foo</v-list-item>
<v-list-item #click="changeToTab('tab-bar')">Bar</v-list-item>
</v-list>
</v-menu>
<v-tab href="#tab-myUniqueKeyThree">TEST THREE</v-tab>
<v-tab href="#tab-myUniqueKeyTwo">TEST TWO</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item value="tab-foo">My Foo</v-tab-item>
<v-tab-item value="tab-baz">Some Hidden Tab</v-tab-item>
<v-tab-item value="tab-myUniqueKeyTwo">Two</v-tab-item>
<v-tab-item value="tab-bar">My Bar</v-tab-item>
<v-tab-item value="tab-myUniqueKeyThree">Three</v-tab-item>
<v-tab-item value="tab-myUniqueKeyOne">One</v-tab-item>
</v-tabs-items>
data: () => {
tab: null,
}
methods: {
changeToTab(tab) {
this.tab = tab;
}
}
Below is a simplified example. Bottom line, use href in the tabs and value in tab-items
https://codepen.io/jack3625/pen/xxwopad
It looks like the only way to get this working is to also create a tab for each menu item and hide it.
<v-tab href="#tab-foo" style="display:none">FOO</v-tab>
<v-tab href="#tab-bar" style="display:none">BAR</v-tab>
Full example shown here:
https://codepen.io/uglyhobbitfeet/pen/NWKaQGZ?editors=1010
I am trying to combine the use of a dialog and a snackbar with VueJS. The problem is the following:
Expected Behaviour:
I should be able to close the snackbar without closing the dialog
What happens now:
The dialog is being closed when the snackbar is clicked
Here is a JSFiddle to reproduce: https://jsfiddle.net/q6m2j4ae/5/
Here is the markup for the problem:
<v-container>
<v-dialog v-model="displayDialog" max-width="300px">
<v-card flat>
This is the dialog content
</v-card>
</v-dialog>
<v-snackbar
v-model="displaySnackbar"
:top="true"
:right="true"
:vertical="true"
color="success"
>
Some Content
<v-btn flat #click.stop="displaySnackbar = false">Close</v-btn>
</v-snackbar>
</v-container>
As you can see, the v-snackbar is at the same level of the dialog. I am not allowed to nest the snackbar into the dialog. But even if I try the snackbar is not even displayed.
What I tried:
I thought that the stop modifier on the click event #click.stop="displaySnackbar = false" would be enough to not close the dialog.
I checked the z-index applied to the elements. The snackbar has a z-index: 1000 and the dialog has a z-index:200. So I'm not able to adjust that value.
Is it a bug? How could I solve the problem on my hand?
A workaround (if the "dismiss on clicking outside the dialog" function is not needed) is to add the property persistent to the dialog.
The click outside the dialog (when clicking the close in the snackbar) is the reason your dialog gets dismissed
For anyone still looking for a good solution: add <div class="v-menu__content--active" style="display:none; z-index:1000;"></div> as a child of your v-snackbar. This tricks v-dialog to think it was not the active component when click outside happened and prevents closing.
I had the same problem. I have produced a solution :
https://codepen.io/alignnc/pen/OdWvJd
<template>
<div id="app">
<v-app id="inspire">
<v-layout row justify-center>
<v-btn
color="primary"
dark
#click.native.stop="dialog = true">
Open Dialog
</v-btn>
<!-- dialog -->
<v-dialog
v-model="dialog"
max-width="290"
:transition="false"
:persistent="snack">
<v-card>
<v-card-text>
Click "agree" to set <br>
this.dialog to false,<br>
and this.snack to true
</v-card-text>
<v-btn
#click.prevent ="snack = true">
Agree
</v-btn>
</v-card>
</v-dialog>
<v-snackbar
v-model='snack'
color='error'
:top='true'>
Hello
<v-btn
color="accent"
flat
#click="snack = false">
Close
</v-btn>
</v-snackbar>
</v-layout>
</v-app>
</div>
</template>
<script>
new Vue({
el: '#app',
data () {
return {
dialog: false,
snack: false
}
}
})
</script>