I'm attempting to add an alert (for validation purposes) inside a Vuetify date picker.... but I can't seem to get it to play nicely with the component structure from Vuetify.
My markup looks basically like this:
<v-menu>
<v-text-field><v-text-field>
<v-picker>
<v-layout row>
<v-alert>
</v-layout>
<v-picker>
<v-card-actions>
<v-btn>Cancel</v-btn>
<v-btn>OK</v-btn>
</v-card-actions>
</v-menu>
And here's a Codepen demo'ing the issue. Click the date to see my jacked-up layout: https://codepen.io/jamesfacts/pen/OrMZgx
I thought adding <v-layout row> around the alert would get me a new row inside the picker, but no soap.
I know I can fix the display by setting CSS properties specifically to the Vuetify components, but that feels like the wrong way to approach this. Is there Vuetify-y solution here or should I just force the rendered HTML to look how I want it.
Change the v-layout to be column instead of row.
Here's an updated codepen
Related
I'm making a form where user press the button and new v-card shows. Everything works but I can't make a good expand transition. It only works with the first card then it tells me to use transition-group. But when I use transition-group I don't get any animation at all. I tried a lot of things and look at the vue documentation.
I shorten the link because I get an error and SO didn't let me post it
I put an important part of my code in codepen:
https://rb.gy/gw6xws
Anyone know the solution how to make expand-transition for every added card because now it works only for the first one?
First, you should move v-for directive to v-expand-transition.
Then you can use appear to trigger the animation when you add new v-expand-transition.
<v-expand-transition appear v-for="klad in kladi" :key="klad.key">
<v-card class="pl-3 pr-3 mt-2 mb-2 rounded-lg tertiary">
<v-container>
<v-layout row wrap>
<v-flex xs12 sm6>
<p>something {{klad.key}}</p>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-expand-transition>
Example
So using v-for and v-dialog, my template looking like this:
<v-list >
<v-list-item v-for="(pool,indexp) in items[0].pools" :key="pool.name">
<v-dialog :retain-focus="false" v-model="dialog" scrollable max-width="300px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">{{pool.name}}</v-btn>
</template>
<v-card><v-card-title>{{pool.name}}</v-card-title></v-card>
</v-dialog>
</v-list-item>
</v-list>
So say the object I'm looping through has 2 elements, this generates 2 buttons that will activate the v-dialog. My problem is that when I click the first "pool" button, the name of the second pool is shown in the dialog. WHy?
I have this in codepen:
https://codepen.io/averied/pen/QWjXxop?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fdialogs%2F
If you’re using the same boolean variable, dialog, for everything in the v-for as it appears to me, then activating one will activate them all. Later ones will be rendered over top of earlier ones. So in a two item list you’ll always see the second item.
You probably don’t need the v-model on the v-dialog at all; I’m fairly certain the v-dialogs can maintain their internal state just fine. Unless you’re programmatically triggering the dialogs through something other than your button in the activator slot, or if you need to display or save the state for some reason. If so, you’ll need to maintain a list of booleans, one for each pool. Could potentially be an attribute on the pool object.
The v-btn (vuetify) component is displayed differently if it has the "nuxt" attribute (to be used as a in the nuxt.js framework).
How to fix it?
The first image is the v-btn component without the "nuxt" (as it should display normally) and the second has the attribute.
<v-btn
class="enter-btn"
large
color="error"
:disabled="!agreed"
>
Accept and Enter
</v-btn>
<v-btn
class="enter-btn"
large
color="error"
:disabled="!agreed"
nuxt
to="/to/url"
>
Accept and Enter
</v-btn>
When the nuxt and to attributes are added, the element changes from <button ...> to <a href="/to/url" ... >.
Unfortunately adding the two code samples to a fresh project does not show the visual difference you have.
The <a> has an additional class v-btn--router, but it doesn't cause the width difference or text alignment issues.
You can debug a little by inspecting each element in the console, looking at the Styles pane and checking for any sources of style (on the RHS) other than Vuetify ones, which are VBtn.sass & VApp.sass.
Since width is one of the problem attributes, it is also worth while checking the width value in the Computed tab.
If it is being set directly by something, you can click it open to see the source of it's value (for example, height is set to 44px by classes .v-btn:not(.v-btn--round).v-size--large in the file VBtn.sass).
I'm trying to make a toolbar using Vuetify for this text editor:
https://github.com/scrumpy/tiptap
My issue here is that TipTap has methods to check for editor status.
e.g. isActive.bold()
TipTap also uses commands to toggle status of formats commands.italic
While the button groups in Vuetify wants to have an array of values.
<v-btn-toggle multiple v-model="format">
<v-btn :value="1" #click="commands.bold">
<v-icon>mdi-format-bold</v-icon>
</v-btn>
<v-btn :value="2" #click="commands.italic">
<v-icon>mdi-format-italic</v-icon>
</v-btn>
<v-btn :value="3" #click="commands.strike">
<v-icon>mdi-format-strikethrough</v-icon>
</v-btn>
I'm coming up short on how to combine these two approaches.
I've tried to create a computed v-model field to bind the button group to and somehow compute the array to bind using the status methods.
The Vuetify button groups seems overly complicated to work with.
Just having a isPressed/Toggled/Checked prop on the button would have solved this a lot easier.
Thoughts here?
I have a prismic group (link_sections) containing a bunch of fields. One of the fields is a link, because the markup I am creating with these groups is supposed to contain a button that links elsewhere on the site. The problem is that I don't know how to use prismic links properly in this context because as far as I can tell it is not possible to bind the link data inside of a v-btn like so...
<v-layout v-for="(section, index) in fields.link_sections" :key="index">
<h2>{{section.header}}</h2>
<v-btn router-link :to="{{section.link}}"></v-btn>
</v-layout>
If I just render out {{section.link}} outside of the v-btn element I can render out the text value of the link successfully, but that's about as much as I can do and obviously I want to use the text as an actual link. Anyone know how I can make a link field from a prismic group work with a v-btn element?
Your syntax is wrong, try this snippet:
<v-btn :to="section.link">Link</v-btn>. Also <b-btn></v-btn> has not router-link prop. Just pass prop to. If you pass to prop, it implies that you want that button to be a <router-link>
Denotes the target route of the link.