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?
Related
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 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.
I have been trying and investigating about disabling the form by default.
<v-form ref="form" v-model="valid" lazy-validation>
<v-select v-model="test" :items="data" :disabled="status"></v- select>
<v-text-field v-model="name" :disabled="status"></v-text-field>
</v-form>
I don't see any disable prop to the v-form. So i am just adding disabled prop to each and every input field to solve this problem. Like Angular adding disable prop to <fieldset> tag or to the form looks simple, is there any thing available in vuetify? any other approach to do this?
I have looked into this my self, made my own form that extends VForm and tried making a disabled directive for it (v-disabled="isDisabled").
Unfortunately at the moment without the knowledge and time to extend all of the components and buttons in question, what you are currently doing is the only way or else you get the mutating prop warning on setting disabled directly with an iterator and trying to set isDisabled will throw an "has no setter method error".
Vuetify needs to update the input and button components to allow pragmatic changes to the disabled property.
Having to set :disabled on each element isn't really that drastic but yes I agree that from the parent form it would be nice to have.
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