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

  • 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[0].childNodes[0].data.trim() to get the q-input label and 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 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?

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

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

  • @geeky try @change.native.

Log in to reply