[v0.17.7] QInput Issue - How to sync data in the right order?



  • Could you please do me a favor, thanks a lot!
    Please see the source code firstly.

    <q-input :value="flowId"
      @change="val => { onChange(val) }"
      @blur="onBlur"
      stack-label="label"/>
    <q-btn color="primary" @click="test()" label="test"/>
    export default {
      data () {
        return { flowId }
      },
      methods: {
        test () {
          console.log('test')
          console.log('call api:' + this.flowId)
        },
        onBlur () {
          console.log('on blur')
        },
        onChange (val) {
          console.log('on change')
          console.log('new value:' + val)
          this.$set(this, 'flowId', val)
        }
      }
    }
    

    From above code, it is using the q-input lazy mode, it has the advantage that onChange event is only triggered when data changes.
    However, if I input something (E.g. abc) and click button directly (no tab key is pressed), then it will get the old data. See below log.

    test
    call api:
    on blur
    on change
    new value:abc
    

    I am not sure if the latest version has the same issue, if not I can upgrade to the latest version.


Log in to reply