Pass the ref to a method when an event occur?

[Suo]

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

[s.molinari]

If you know you are dealing with “a”, then you can send it to your select method. select(a).

Scott

[Suo]

@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.

[metalsadman]

@Suo try @input=“select($event)”. If not use .native modifier.

[Suo]

@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]

Sorry, it needs to be a string. select('a').

Scott

[metalsadman]

@Suo I see so you just want to check the identifier, then yeh just pass it as argument. Like Scott mentioned above. Using arrow would look like this @input="val => { select(val, 'a') }".

[Suo]

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.

[turigeza]

@Suo I wouldn’t give up just yet. : ) You should try and wrap your head around it. What @metalsadman and @s-molinari is suggesting here is very well known way of doing this. And there is no reason why it shouldn’t work for you other than something trivial in your code.

[s.molinari]

Of course it works.

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

Scott

[Suo]

Thank you all!