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
Related
Is it possible to have Vuetify's v-tooltip with a clickable link?
At this point using the default code provided by documentation
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-icon
color="primary"
dark
v-bind="attrs"
v-on="on"
>mdi-home</v-icon>
</template>
clickable link
</v-tooltip>
We can't click the anchor link because once we mouse out the icon, the tooltip automatically closes. Is this a limitation on Vuetify ?
You have 2 problems to solve:
Tooltip hides as soon as mouse leaves the activator (the icon). Just use close-delay prop set to (for example) 2000 (ms) ...so the tooltip wont disappear immediately but only after 2 seconds when you move mouse out of the icon...
By default, Vuetify tooltip's content is rendered with the pointer-events: none; CSS property. Which means the content do not generate any pointer events. Only thing you can do about it is to override the default style...
template
<v-tooltip bottom close-delay="2000">
<template v-slot:activator="{ on, attrs }">
<v-icon
color="primary"
dark
v-bind="attrs"
v-on="on"
>
mdi-home
</v-icon>
</template>
clickable link
</v-tooltip>
style
.v-tooltip__content {
pointer-events: initial;
}
Demo
You can control visibility by using v-model on the tooltip.
The following is taken from vuetifys example on visibility:
<v-tooltip
v-model="show"
top
>
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
>
<v-icon color="grey lighten-1">
mdi-cart
</v-icon>
</v-btn>
</template>
<span>Programmatic tooltip</span>
</v-tooltip>
And then define show in data:
show: false
https://vuetifyjs.com/en/components/tooltips/#visibility
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.
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 am using v-autocomplete with autofocus.
<v-autocomplete
autofocus
solo
rounded
prepend-inner-icon="mdi-magnify"
#keyup.enter="showFilteredItems"
id="searchInput"
:items="stocks"
item-text="symbol"
item-value="name"
:filter="customFilter"
ref="autocomplete">
<template v-slot:item="data">
<v-btn block depressed :to="`/stock/${data.item.symbol}/`">
<v-list-item-title v-html="data.item.symbol"></v-list-item-title>
<v-list-item-subtitle v-html="data.item.name"></v-list-item-subtitle>
</v-btn>
</template>
</v-autocomplete>
the autocomplete work correctly when user click on it and then type the input:
but when user type the input without clicking on v-autocomplete, v-menu does not appear :
however relative events emitted as expected and items are filtered.
surprisingly i tried the same code in vue (not nuxt) and it works properly!
I think you can use :
:input-attrs="{'autofocus':true}"
like question below:
https://github.com/paliari/v-autocomplete/issues/27
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>