Use parameter name for v-model

Question

I would like to use an object's parameter to contain the v-model parameter name. There will be lots of q-items so I need to use an object for a cleaner implementation.

So in the example below, how can I do it so that the q-items will use obj.param (first, second and third parameters) which in turn will display:

abc123, def456, ghi789

    <q-list dense>
      <q-item v-for="obj in TXN_DETAILS" style="margin-top: -20px" :key="obj.label">
        <q-item-section>
          <q-item-label>{{ obj.label }}</q-item-label>
          <q-item-label caption>{{ obj.caption }} </q-item-label>
        </q-item-section>
        <q-item-section side style="margin-top: 10px">
          <!-- Here is where I am having an issue -->
          <q-input outlined dense :v-model="obj.param" />
        </q-item-section>
       </q-item>
    </q-list>

const TXN_DETAILS = [
  {
    label: 'First Label',
    caption: '1st',
    param: 'first'
  },
  {
    label: 'Second Label',
    caption: '2nd',
    param: 'second'
  },
  {
    label: 'Third Label',
    caption: '3rd',
    param: 'third'
  }
]

new Vue({
  el: '#q-app',
  data () {
    return {
      TXN_DETAILS,
      first: 'abc123',
      second: 'def456',
      third: 'ghi789'
    }
  }
})

CodePen: https://codepen.io/keechan/pen/yLMWXGP?editors=101

Answer 1

You can change v-model to value and use computed or method to get dynamic value from object.

Here an example I use computed to show value of param follow first, second or third

https://codepen.io/dangvanthanh/pen/WNpBEGX?editors=101