No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Pass the ref to a method when an event occur?

    Help
    4
    11
    461
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      Suo last edited by

      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

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

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

        Scott

        S 1 Reply Last reply Reply Quote 0
        • S
          Suo @s.molinari last edited by

          @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 1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman @Suo last edited by

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

            S 1 Reply Last reply Reply Quote 0
            • S
              Suo @metalsadman last edited by

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

              metalsadman 1 Reply Last reply Reply Quote 0
              • s.molinari
                s.molinari last edited by

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

                Scott

                1 Reply Last reply Reply Quote 0
                • metalsadman
                  metalsadman @Suo last edited by

                  @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') }".

                  1 Reply Last reply Reply Quote 1
                  • S
                    Suo last edited by

                    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.

                    1 Reply Last reply Reply Quote 0
                    • T
                      turigeza last edited by 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.

                      1 Reply Last reply Reply Quote 1
                      • s.molinari
                        s.molinari last edited by

                        Of course it works.

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

                        Scott

                        1 Reply Last reply Reply Quote 1
                        • S
                          Suo last edited by

                          Thank you all! 😃

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post