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



  • 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), 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.



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



  • Of course it works.

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

    Scott



  • Thank you all! 😃


Log in to reply