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!