Passing data into @input handler inside a list
-
I have a list of QItems generated using
v-for
, and that list is made up of QOptionGroup components each offering a set of choices. The problem is that I would like to bind the@input
handler of the QOptionGroup to a function which would receive 2 parameters - the key from the list, and the value of the option the user clicked on. So the template looks something like this:<q-item v-for="setting in toolSettings" :key=setting.key <q-field :label="setting.label"> <q-option-group type="radio" :value="page[setting.key" :options="setting.options" @input="setOption" /> </q-field> </q-item>
That all works fine, but the
setOption()
function only receives the value, and if that value is valid for more than one of thetoolSettings
, it’s impossible to determine which item was clicked. So I tried this:@input="setOption(setting.key)"
But now all I get is the key, not the value. I was hoping it would appear as a second parameter, but it doesn’t, and I just can’t figure out how to pass both the key and the value to the handler. I also tried making
setOptions()
take 2 parameters (key and value), and using partial application, but that doesn’t seem to be supported directly in event handlers. -
OK - here’s my solution. I’m still not 100% sure why this works and making
setOption()
return a function doesn’t, but hey ho. I’m sure it’s tied up inside template compilation:@input="val => { setOption(setting.key, val) }"