No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Passing data into @input handler inside a list

    Help
    1
    2
    1265
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      dsl101 last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • D
        dsl101 last edited by

        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) }"
        1 Reply Last reply Reply Quote 1
        • First post
          Last post