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

[tsulli]

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]

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

[tsulli]

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

@geeky try @change.native.

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

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

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

@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], ...)".

[Amod]

Many thanks !!