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
event.target.labels[0].childNodes[0].data.trim()to get the q-input label andevent.target.valueto 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?
-
@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.
