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

    Passing more information and/or $event from q-select on change/input

    Help
    3
    9
    1953
    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.
    • T
      tsulli last edited by

      I have a form with multiple q-selects and inputs. When the value of the q-select is changed, I need to collect the new selected value, the v-model property name, and also get a reference to the element (so I can grab the associated label text). I’m able to do this with q-inputs by adding an @change listener that passes $event and the v-model property name, like so:

      <q-input v-if="isEditing" outlined v-model.lazy="person.firstName" @change="onFormChange('firstName', $event)" dense />
      

      Then from the onFormChange event handler I’m able to use event.target.labels[0].childNodes[0].data.trim() to get the q-input label and event.target.value to get the new value.

      How can I accomplish the same thing with a q-select? Q-selects don’t have the change event, and the input event only emits the new value of the v-model. I’ve tried using the blur and pop-up hide events, but finding the new value and the associate label from the event.target are proving difficult because of all the nested divs that create the q-select. That also feels like a pretty fragile solution because if Quasar changes the HTML tags for the q-select in a future version, my javascript will fail to get the value. Is there a better way to approach this?

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

        @geeky do it on input. ie. :value="model" @input="value => { handler('firstName', value) }".

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

          @metalsadman Thanks. We ended up going with the input event and passing the Label text to the handler instead of using $event to access it via the DOM. It’s a little more work for us to maintain going forward but it gets the job done for now. Would love in the future if q-select could emit a change event that includes $event.

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

            @geeky try @change.native.

            1 Reply Last reply Reply Quote 0
            • A
              Amod last edited by Amod

              I have a similar scenario, where the q-select components are rendered dynamically at runtime. The page has more than 1 select controls - all of which fire the same @input event. Now, I want to write code depending on which q-select @input event was fired. Since in the @input handler, I only get the new-value, how do I get information of which q-select triggered the event?

              My q-select line (executes inside a for loop):

              <q-select :options="element.options" v-bind="element.props" v-model="formmodel[element.parentfield][element.field]" square dense outlined @input="ddlSelectionChanged" />
              

              ddlSelectionChanged - method fired on @input change.

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

                @Amod https://forum.quasar-framework.org/topic/6135/passing-more-information-and-or-event-from-q-select-on-change-input/2 it’s above, pass some identifier in your handler. let’s say you have element.id assuming you are doing this in v-for. then your handler would look like @input="value => { ddlSelectionChanged(value, element.id) }".

                1 Reply Last reply Reply Quote 0
                • A
                  Amod last edited by Amod

                  @metalsadman Thank You for your quick response. Yes, I did what you suggested, and it works. However, I was thinking if I could get reference to the HTML element, by passing a parameter as –

                  @input="value => { ddlSelectionChanged(value, element.id, $event) }"
                  

                  which gives me - $event.target…XXX access to the element’s DOM. But i guess with the element.id i will be able to do what I intend to achieve. Thank you once again.

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

                    @Amod input event only emit the value, if you really want to get the dom element, then use a ref on your q-select and pass it along. q-select ref="'uniqueRef + element.id'" @input="val=> { handler(val, $refs['uniqueRef' + element.id], ...)".

                    1 Reply Last reply Reply Quote 0
                    • A
                      Amod last edited by

                      Many thanks !!

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