Pass the ref to a method when an event occur?
-
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 inv-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 -
If you know you are dealing with “a”, then you can send it to your
select
method.select(a)
.Scott
-
@s-molinari I am afraid not (just tried). If you call
select(a)
, thena
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. -
@Suo try @input=“select($event)”. If not use .native modifier.
-
@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. -
Sorry, it needs to be a string.
select('a')
.Scott
-
@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') }"
. -
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.
-
@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.
-
-
Thank you all!