I am trying to programmatically change the color of chips inside of a v-combobox if there is an error for that element.
I was just using v-combobox with chips before. This allowed editing of the chips by double clicking. Here's a codepen that allows editing similar to what I was using that allows editing.
https://codepen.io/hassaan97/pen/ZEYWveE
Since I wanted to change the color of individual chips I am using v-slot with v-chip components. Once I do this however I can no longer edit the items when I click on them. Here's a similar example with the same problem. https://codepen.io/hassaan97/pen/KKwzZNY
Here's my code-
<v-combobox
v-model="emails"
multiple
:search-input.sync="syncEmail"
:chips="true"
:deletable-chips="true"
:clearable="true"
:error-messages="errorMessage"
#click:close="remove(data.item)"
:background-color="white"
>
<template v-slot:selection="data">
<v-chip close :color="getColor(data.item)" #click:close="remove(data.item)">
<strong>{{ data.item }}</strong>
</v-chip>
</template>
The selection slot exposes a select function:
<template v-slot:selection="data">
<v-chip #click="data.select">
https://codepen.io/kaelwd/pen/ZEYWvMQ
Here's what the default chip does
And everything available in the slot
Related
I'm new to Vue and have looked at some answers regarding my problem in which, I want to pass an id (for example 0099) from my child component to the parent via v-model. Is this possible, to pass an ID this way?
Here's my child code:
<template>
<v-dialog v-model="show" width="unset">
<v-card class="px-15 py-8" elevation="0">
<div class="px-6 py-8 mb-n4 text-center">
<span class="lucky-point--text text-h6">
Are you sure you want to access this employee?
</span>
</div>
</v-card>
</v-dialog>
</template>
What I want is that in v-model="show" I want to also include some id of an employee. Example v-model="show[0099] to the parent.
my parent code:
<ClaimDialog
:id="item.employeeid"
/>
although I used some props.
props: {
id: Number
}
Once I click from parent dialog it gets stacked on top of one another. I have found one answer but on my side its a bit tricky, since I'm new to Vue, and this approach is different from mine, since mine has a child component. Here's that question: Why are my dialogs stacked on top of one another? (Vuetify)
If you need to pass data from a child to a parent, then you must use $emit
Here is an example of a question and answer
Here is a link to the official documentation
If these links do not help you, then update the question: what event should the data be transmitted on, and how your components are connected (more code from your components)
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?
this v-menu and links how to hide selected input while editing that same
<v-list-tile-action>
<v-checkbox v-model="sites" v-bind:value="item" #cnange="selectedRemove('site',item)"></v-checkbox>
</v-list-tile-action>
<v-list-tile-content #click="selectedRemove('site',item)">
<v-list-tile-title>#{{item.name}}</v-list-tile-title>
</v-list-tile-content>
From reading your question, seems like you want a customized combo box like in this link.
It gives you the ability to add/edit your own items and removes it from the options list after selected. When removed from the selected list, it is added again to the options list.
I hope this answer can assist you :)