Checkbox using array of objects: how to determine which 'object' was clicked

[sfdlkelkas]

I want to render a list of objects that contain various fields. One of the fields is a boolean value, that needs to be rendered as a checkbox

In order to update the state, an API request needs to be made, containing the object.id.

<q-item v-for="thing in things">
  <q-item-section>
    <q-checkbox v-bind:id="thing.id" v-model="thing.is_complete" v-bind:name="thing.name" @input="setThingCompleteMethod" />
  </q-item-section>
</q-item>

<q-item-section>
   <q-item-label>{{ thing.name }}</q-item-label>
    <q-item-label caption>
        {{ thing.id }}
    </q-item-label>
</q-item-section>

In normal Vue it’s possible to bind the “id” tag along with v-model, then the @click method will be able to access the id via the event.target.id property.

Anyway, in quasar the @input method has ‘event’ and ‘value’ parameters, but they don’t contain any usable way of determining which object has actually been clicked.

The event object has the ‘id’, but it’s several nodes above the ‘target’, and even then it appears to be only present when the checkbox value is ‘true’ and not ‘false’…

event.target.parentNode.parentNode.parentNode.id …

What’s the best way to do this?

[metalsadman]

@sfdlkelkas pass something as parameter on the event handler. Ie. @input="v=>{handler(v, item.id, otherparams)}", same method can be used for all events.

[sfdlkelkas]

@sfdlkelkas pass something as parameter on the event handler. Ie. @input="v=>{handler(v, item.id, otherparams)}", same method can be used for all events.

Ok, wow. That’s great! I really had no idea that was possible. The documentation for that event mentions nothing of that feature:

@input -> function(value, evt)

Thanks

[dobbel]

@sfdlkelkas

@input -> function(value, evt)

This means the @input event callback expects max 2 params. ( value and evt)

But be aware that with this line:
@input="v=>{handler(v, item.id, otherparams)}"
your are only using first parameter(value) of the @click event callback.

To use both params:
@input="(v,evt)=>{handler(v, item.id, otherparams, evt)}"

So if the api doc for an event looks like this ( 3 params):
@input -> function(newValue, oldValue, evt)
you can do:
@input="(oldValue,newValue, evt)=>{handler(oldValue, newValue, ect....