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

  • 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: ''

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

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

      @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!

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

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

Log in to reply