To make the hover effect of a v-btn node in vuetify more visible I use the following code:
<v-hover v-slot:default="{ hover }" open-delay="200" class="ma-1">
<v-btn color="primary"
v-if="..." v-on:click="..." :elevation="hover ? 16 : 2"
>
Button Title
</v-btn>
</v-hover>
It is working, but in Chrome I get the warning "v-hover should only contain a single element".
Any advice to avoid this?
The v-if removes the <v-btn/> element on the DOM so when showBtn is set to false, <v-hover/> is saying that it has no child.
Use v-show, instead of v-if, so the <v-btn/> element will not be removed entirely from the DOM. It will just hide it (similar to display: none;). OR put the v-if in the <v-hover/> element instead.
See this demo at codesandbox.
Related
I'd like to use a v-menu component in Vuetify to appear below a text field, but I need to be able to trigger the menu from a method. I can do that with v-model on the menu, but the menu appears at the top left corner of the screen. If I add absolute :position-x="0" :position-y="0" to the v-menu, I can change the position but it's still relative to the entire screen, not the parent div that it's declared in. When I look at the final HTML, it looks like the menu has been put as a child of the v-app container, which explains why it ends up where it does.
Is there some way I can position the menu relative to a page element while still triggering the menu from a method? Or, to put it another way, is it possible to position the menu relative to an element/component that has nothing to do with the menus activation?
<div style="position:relative">
<v-text-field v-model="orgName" label="Organisation Name"></v-text-field>
<v-menu v-model="showMenu">
<v-list>
<v-list-item v-for="(entry, i) in entries" :key="i">
<v-list-item-title>{{ entry }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
I want to use in line editing option in Vuetify Datatable component instead of opening a dialog box for editing.
Is there a way to use contenteditable attribute in element in vuetify Datatable component.
According to MDN https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable you can apply contenteditable attribute to any HTMLElement.
Try adding the attribute to the element you want to edit.
eg
<div contenteditable="true"></div>
Vuetify has an inbuild content editable mode.
DOCS
The idea is that in every slot you add a v-edit-dialog and v-text-field and then sync the data using v-model and return-value.sync
Instead of using contenteditable attribute, I used the following code and worked perfectly (editable without opening a dialog box and save to bind variable)
<template v-slot:item.name="props">
<v-text-field v-model="props.item.name"> </v-text-field>
</template>
I'm trying to catch the click of a v-switch prior to it flipping to see if a preexisting condition has been met. While logging e.target of the event I am getting
<div class="v-input--selection-controls__ripple primary--text"></div>
as the result but every now and then I get
<input aria-checked="true" id="input-24" role="switch" type="checkbox" aria-disabled="false" value="Arizona">
Am I missing something in this or is this unexpected behavior?
Codepen Example
What is happening is that you're clicking on two different elements.
When you click on the ball or around it in the grey area you click on this element:
But when you click outside it but still inside the input you click on this other element:
However, both of then capture you click.
You could change your implementation to capture the change event:
<template v-slot:item.ia="{ item }">
<v-switch
v-model="ia_array"
:key="item.id"
:label="item.state"
:value="item.state"
#change="onChange"
></v-switch>
</template>
Vuetify has some nice built-in transitions. But how can I call a method when the default dialog scale animation has finished?
https://codepen.io/anon/pen/qKNNLw
<v-dialog v-model="dialog" persistent max-width="200">
<v-btn slot="activator">Open</v-btn>
<v-card>
<v-card-text>Thank you!</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat #click.native="dialog = false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
Vuejs describes some Javascript callbacks here: https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
Is it possible to use them somehow?
My first idea was to set the dialog transition attribute to false and wrap it with a custom transition but this does not seem to work (disabling transition works but adding my own did not), maybe due to the underlying structure generated by Vuetify.
Background: I render a Google map inside the dialog that needs to resize after reaching full size.
This issue is being treated in v1.2.x milestone of Vuetify :
Heres the issue
You may consider recreating the modal wrapping it with the proper vuejs hooks as well.
Is it possible to add tooltip to the expand/collapse button oJQGrid so that it can change when expanded and vice versa ...
You need to see the documentation for the control but if not i just inspect it and collapse button html is
<span class="ui-icon ui-icon-circle-triangle-n"></span>
and expand is
<span class="ui-icon ui-icon-circle-triangle-s"></span>
so you can get the element by jquery and append what ever kind of html elements you want