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 the toolSettings, 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) }"

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.