[Solved] [V1] QInput - lazy modify does not take effect

[Stanley]

Hi quasar team,

As you know, lazy is the vue’s modifier.
However, it does not take effect in quasar. Please see below code.

<q-input v-model.lazy="test"/>
<input v-model.lazy="test"/>
<q-input v-model="test"/>

export default {
  data () {
    return {
      test: ''
    }
  }
}

[metalsadman]

@Stanley please use the search function this has been discussed plenty of times, it’s a vue js issue. Refer to this https://forum.quasar-framework.org/topic/828/qinput-lazy-modifier/6

[Stanley]

@metalsadman Actually, I did some search and found that topic.
But I am afraid that topic is out of date, because vue has already fixed that issue. As you can see the above source code, <input v-model.lazy=“test”/> it works and it is not quasar component.

I also tried the alternative way before,

<q-input
  :value="model"
  @change="val => { model = val }"
/>

But it will throw below error if you open the dev console.
Invalid prop: type check failed for prop “value”. Expected String, Number, got Event

Could you please check again, thanks!

[metalsadman]

@Stanley Nope, as you see in their example they’re using native input, not a vue component (which QInput is). See the link for the workaround. Your error is exactly what it’s saying, its a type error, your val there is an event. If you did check the link, proper way is val => { model = val.target.value }.

[Stanley]

@metalsadman Thanks a lot for your help!
Finally I understood the meaning of native input.
And thanks for rectify my syntax because I am still using the syntax in v0.17.x.