I have added code for v-tooltip but it doesn't display when I hover the combobox , do you see mistakes or in the order of the code, let me know, please.Thanks .
<template>
<div>
<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-combobox
bottom
chips
:items="items"
label="Choose videos"
multiple
/>
</template>
<span>Left tooltip aaaaaaaaaaaaaaaaaaaaaaa</span>
</v-tooltip>
</div>
</template>
When I hover the combobox , nothing happens
You're not applying the activator slot attributes.
Secondly, the combo box creates a parent element that wraps the input that the activator attributes bind to.
This breaks the tooltip, causing it to only trigger when the box input is clicked on.
What you need to do is also wrap your combo box in a div and apply the activator to the div like this:
<template>
<div>
<v-tooltip top>
<template #activator="{on, attrs}">
<div multiple v-on="on">
<v-combobox
bottom
chips
:items="items"
label="Choose videos"
v-bind="attrs"
/>
</div>
</template>
<span>Left tooltip aaaaaaaaaaaaaaaaaaaaaaa</span>
</v-tooltip>
</div>
</template>
This same fix also applies to other Vuetify elements such as v-select which also create their own parent elements.
Related
I have customized the v-data-table header with text-field for searching to make the function compact. But I can not prevent the sort click function on text-field.
Step to Reproduce:
<div id="app">
<v-app>
<v-main>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
>
<template v-slot:header.calories="{ header }">
<v-text-field label="search calories"></v-text-field>
</template>
</v-data-table>
</v-main>
</v-app>
</div>
Please click this Codepen link
Please click on search calories one to two times, it sorts asc or desc.
I want to stop the sort function only on the header text or custom text-field, because there is a sort icon right side of it.
Put a #click.stop on the v-text-field:
<template v-slot:header.calories="{ header }">
<v-text-field label="search calories" #click.stop />
</template>
This will stop the click event from propagating into the header.
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 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
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 want to customize the colors of Vuetify. So I am using slots of various components to do it. While I am able to achieve custom color for checkbox in header using header.data-table-select slot. The color of checkbox when only some of the rows are selected(but not all) is still grey. Can anyone suggest what I can do to customize its color.
Link to codesanbox
Problem screenshot
Partially working
When value is false, v-simple-checkbox doesn't apply color.
but props.value become true only when all values are selected.
I think this way is better.
<template v-slot:[`header.data-table-select`]="{ props, on }">
<v-simple-checkbox
:value="props.value || props.indeterminate"
v-on="on"
:indeterminate="props.indeterminate"
color="primary"
/>
</template>
I fixed it this way.
<template v-slot:header.data-table-select="{ props, on }">
<v-simple-checkbox
color="primary"
v-if="props.indeterminate"
v-ripple
v-bind="props"
:value="props.indeterminate"
v-on="on"
></v-simple-checkbox>
<v-simple-checkbox
color="primary"
v-if="!props.indeterminate"
v-ripple
v-bind="props"
v-on="on"
></v-simple-checkbox>
</template>