Np - Thanks Henrique!

Thanks for that Henrique - it’s a bit confusing for end-users. Would you have an idea how to do it so the half-stars show while you are sliding left to right (left to center of star = show half-star, center to right = show full-star)? Thanks!

Hi,

I wish to have 5 stars using Rating so that users can select a value between 0.5 and 5 as either of the following: 0.5 - 1 - 1.5 - 2 - 2.5 - 3 - 3.5 - 4 - 4.5 - 5. I don’t understand how to do it and the only example in the doc shows one icon allowing half-star only when you define the model value as 3.5 (so only the 4th star is split while all the other stars are full and you cannot select a 0.5 value).

Is there a way to accomplish this and if yes, how? Thanks!

Thank you all!

Thanks to both - unfortunately none of those worked for me. For now I navigate the MouseEvent to find its path and from there I retrieve an id attribute I added to the q-select and in which I defined the reference a, b or c.

@metalsadman Thank you for taking the time to answer me. Both @input=“select($event)” and @input.native=“select($event)” give me the same object (here the MouseEvent). I guess I’ll have to find recursively its ancestors until I find an id equals to “a”, “b” or “c”. Thank you again.

@s-molinari I am afraid not (just tried). If you call select(a), then a will contain the options selected and you won’t have the information about the q-select object. A secondary argument gives you the MouseEvent and I tried to navigate through it to get to the q-select object reference but to no avail. Thanks.

Hi,

I am using several q-select components to create my form. The details of each q-select are based on an array like this:

dictionary:
	[
          { key: 'a', raw: [], filtered: [], selection: [], label: 'Brand A', display: 'Select A' },
          { key: 'b', raw: [], filtered: [], selection: [], label: 'Brand B', display: 'Select B' },
          { key: 'c', raw: [], filtered: [], selection: [], label: 'Brand C', display: 'Select C' }
        ]

This allows me to then define each q-select as such (simplified):

<q-select multiple 
	v-model="dictionary.find(element => element.key === 'a').selection"
	:label="dictionary.find(element => element.key === 'a').label"
        :options="dictionary.find(element => element.key === 'a').filtered"
	:display-value="dictionary.find(element => element.key === 'a').display"
	option-value="id" option-label="name"
        v-on:filter="filter" v-on:input="select"></q-select>

My problem comes in the v-on:input="select" as I cannot find how to reference in the “selection” method what is the specific q-select that called it. The problem doesn’t exist in v-on:filter="filter" because in the “filter” function, the “ref” object becomes available automatically (reference here, in the “Script” section).

I am doing this because I need to be the one defining what the list of options selected becomes and what I display when end-users change their selection.

Does anyone have a clue how to do that? thanks in advance,

Best Regards,
Suo