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



  • <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
    }
    


  • 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)
    }
    


  • @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?



  • 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…



  • 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) }
    
    1. 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,
    }
    
    1. 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!



  • 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)
          }
        }