[Solved] How to get variable name of v-model for the current selected component

[Stanley]

<q-input v-model="name1" :after="[{icon: 'search', handler () { popup() }}]"/>
<q-input v-model="name2" :after="[{icon: 'search', handler () { popup() }}]"/>
popup () {
// How to get variable name of v-model for the current selected component
// if click the first component, output name1
// if click the second component, output name2
}

[chbarr]

Pass the v-model name as parameter of your popup function

<q-input v-model="name1" :after="[{icon: 'search', handler () { popup('name1') }}]"></q-input>
<q-input v-model="name2" :after="[{icon: 'search', handler () { popup('name2') }}]"></q-input>

popup: function (name) {
   this.$q.notify(name)
}

[Stanley]

@chbarr Thanks! Yes I know this method. But the variable is repeated, I just want to input variable name1/name2 once. Then in the popup method, is it possible is there any system method to capture current selected component attribute?

[chbarr]

check the answer of LinusBorg in this thread: https://forum.vuejs.org/t/re-ask-how-to-get-v-model-expression/16112
it’s not possible…

[Stanley]

Now the scenario become more complex.
I’d like to pass the values of attribute v-model, readonly to method popup.
For attribute v-model, it’s fine that I can repeated input, but for attribute readonly, how can I pass current value?

// this field is always readonly
<q-input v-model="po.poNumber" readonly :after="[{icon: 'search', handler () { popup('po.poNumber', ??) }}]"/>
// this field is readonly when opMode equals to display
<q-input v-model="po.poType" :readonly="opMode === 'display'" :after="[{icon: 'search', handler () { popup('po.poType', ??) }}]"/>
// readonly for this field is determined by another condition
<q-input v-model="po.poFieldXX" :readonly="another condition" :after="[{icon: 'search', handler () { popup('po.poFieldXX', ??) }}]"/>

export default {
  data () {
    return {
      po: {
         poNumber: '',
         poType: '',
         poFieldXX
      },
      opMode: '' // create / change / display / delete
    }
  }
methods: {
  popup (fieldName, readonly) {
  }
}

I tried a lot of methods, but failed.

1. pass “this”, but it can’t get current <q-input>

handler () { popup('po.poType', this) }
or
handler: ()=> { popup('po.poType', this) }

2. using $ref which I think is still unavailable.
   2.1) if there are a lot of fields, it is hard to control because it is hardcoded
   2.2) if <q-input> is embedded into <q-table>, using $ref is hard to control

<q-input ref = "po.poNumber:" ... />
<q-input ref = "po.poType" ... />
<q-input ref = "po.poFieldXX" ... />
popup (fieldName) {
  this.$refs.po.poType,
  this.$refs.po.poType,
  this.$refs.po.poFieldXX,
}

3. using this.$vnode, still failed

popup (fieldName) {
  this.$vnode
}

Currently, all the popup is applied for <q-input>, is there any idea to solve with <q-input>?
Appreciate for your help!

[Stanley]

After debugging source code, there are two workarounds.
The first one, pass parameter “event” that the framework provides

handler (event) { popup('po.poType', event) }
...
methods: {
  popup (fieldName, event) {
    console.log(event.srcElement.parentElement.firstChild.children[1].readOnly)
  }
}

The second one has to change framework source code.
In QInputFrame.js, pass a new parameter when call method item.handler()

__baHandler (evt, item) {
      if (!item.allowPropagation) {
        evt.stopPropagation()
      }
      if (item.handler) {
        console.log(this.$vnode.data.props.readonly)
        item.handler(evt, this)
      }
    }