q-select change q-chips bg and text color when multiple is used.

[Fedack]

I have the following:

<q-select
                  label="AND"
                  square
                  v-model="element.AND"
                  use-input
                  use-chips
                  multiple
                  autofocus
                  borderless
                  hide-dropdown-icon
                  input-debounce="0"
                  new-value-mode="add-unique"
                  hint="All must be true."
                  color="accent"
                  dark
                />

And I want to be able to change the color of the chips inside. How would I go about this? I can find in the documentation that there’s a way to add a scoped props for the q-chips but it’s not clear on how to make it work with a simple array like [‘one’,‘two’,‘three’].

[s.molinari]

Yes. You can use either the selected or the selected-item slots.

https://codepen.io/smolinari/pen/ExxRaeW

The docs, which you probably already read: https://quasar.dev/vue-components/select#Example--Selected-item-slot

Are you wanting different colors for each chip? Or the same color? For the same color, you can use the selected slot. I noticed though, you wanted to add values in your example code and have multiple selections, then the selected-item slot is necessary. Also, if you want different colors, use the selected-item slot and it would be better when your options are an array of objects, and you also should have an array of objects in your model, as the docs suggest. I didn’t go that far with my example, as I wasn’t sure of your use case.

Scott

[Fedack]

@s-molinari Thanks a lot, it works!
And what if I wanted to change the color of the q-select input text and it’s non-active color (like the color of the label when it’s not selected?)

[s.molinari]

You mean like this? https://codepen.io/smolinari/pen/ExxRaeW (first example)

Scott

[Fedack]

Well, that’s one problem solved. But I mean what’s been outlined in blue:
https://files.themansion.top/f/3b43facae9354823acef/

Basically the label.

[s.molinari]

The first example is a simple selection/ css change. The second is dynamic (click into the input).

https://codepen.io/smolinari/pen/ExxRaeW

Scott

[metalsadman]

@Fedack take time to read vue docs too
https://vuejs.org/v2/guide/class-and-style.html

[Fedack]

@s-molinari Thanks. So yeah, there’s no way to change it via simple prop. It would be good to add a prop called label-color or something like that. But this answers my questions.

[s.molinari]

Well, the whole component works off of the color prop.

Scott

[Fedack]

@s-molinari But isn’t that only when it’s focused? It’d be nice to have a prop to have it to change the color when it’s not or change the default color for dark and non-dark.

[s.molinari]

Imagine every conceivable possibility to do things differently with QSelect. And, QSelect already has 15 different styling props and 72 props in total. So yeah… CSS and the class and style props are your friends. Oh, and component composition too.

Scott

[Fedack]

Oh, I completely agree, you can’t cover every bases. But this is the first thing you see, it’s the main label color. I do think it should be easy to modify using props since you can change the color of the focus, why not change the color of the unfocused one? But anyways, just a suggestion. @s-molinari
Thank you for your time