link to elements by property ??

[Pedro]

Hi

I don’t know exactly how to ask for help in this case.

<div v-for="item in tipo_pax" :key="item.tipo" :bind="item" class="row"">
  <div style="width: 50px; font-size: 16px;">{{item.tipo}}</div>
    <q-btn class="on-right" dense round size="sm" icon="remove" color="secondary"/>
    <q-input
      hide-bottom-space
     class="on-right"
     borderless
     input-class="q-ma-none"
     v-model="lclPacote[item.tipo.toLowerCase()]"
     style="height: 25px; padding: 0px;"
     input-style="text-align: center; width: 30px;"
    />
<q-btn @click="incrementa(what here ??)" round size="sm" icon="add" color="secondary"/>
</div>

this code creates the forms like :

the buttons and inputs are created dinamically. I need to know that when I click the first + button it will increment de the first input.

When I click on the buttons how can I pass a unique id to the function ?

I need the first button to increment/decrement the first input. The second button for the second input … and so on

the way is to use refs ?

Thank you

[metalsadman]

@Pedro use search function in this forum, https://forum.quasar-framework.org/topic/6135/passing-more-information-and-or-event-from-q-select-on-change-input/3

[Pedro]

Thank’s for your help.
Since my controls are bound to an array, I just call the function passing the array key.

<div v-for="item in tipo_pax" :key="item.tipo" :bind="item" class="row"">
  <div style="width: 50px; font-size: 16px;">{{item.tipo}}</div>
    <q-btn @click="decrementa(item.tipo.toLowerCase())" class="on-right" dense round size="sm" icon="remove" color="secondary"/>
    <q-input
      hide-bottom-space
     class="on-right"
     borderless
     input-class="q-ma-none"
     v-model="lclPacote[item.tipo.toLowerCase()]"
     style="height: 25px; padding: 0px;"
     input-style="text-align: center; width: 30px;"
    />
<q-btn @click="incrementa(item.tipo.toLowerCase())" round size="sm" icon="add" color="secondary"/>
</div>

and the function is :

incrementa (tipo) {
  this.lclPacote[tipo]++
},
decrementa (tipo) {
  if (this.lclPacote[tipo] > 0) {
    this.lclPacote[tipo]--
  }
}

and the object :

lclPacote: {
    adt: '0',
    chd: '0',
    inf: '0',
    sen: '0',
    est: '0',
    free: '0'
  },

It works fine

Thank you