QInput Lazy Modifier?

[daveline]

Just curious if there is an issue with the lazy modifier on q-input? Typing seems to always trigger the change & input.

Trim modifier works.

Win 10, Chrome 60.0.3112.113, Quasar v0.14.4 Edge

Here is my test code. See the console out

<template>
  <div>
    <h3>"{{ junk }}"</h3>
    <h3>q-input</h3>
    Normal: <q-input type="text" v-model="junk" @input="input" @change="change" /><br>
    Lazy: <q-input type="text" v-model.lazy="junk" @input="input" @change="change" /><br>
    Trim: <q-input type="text" v-model.trim="junk" @input="input" @change="change" /><br>
    <h3>html/vue input</h3>
    Normal: <input type="text" v-model="junk" @input="input" @change="change" /><br>
    Lazy: <input type="text" v-model.lazy="junk" @input="input" @change="change" /><br>
  </div>
</template>

<script>

import {
  QField,
  QInput
} from 'quasar'

export default {
  name: 'Lazy',
  components: {
    QField,
    QInput
  },
  data () {
    return {
      junk: 123
    }
  },
  methods: {
    change () {
      console.log('junk change')
    },
    input () {
      console.log('junk input')
    }
  }
}
</script>
<style >

</style>

[fchabouis]

Yep, I confirm I noticed the same problem. QInput won’t be lazy.

[flight9]

yes, same problem. Using .lazy seems not trigger the change event.

[s.molinari]

Can someone create an issue on Github, if not already done please?

Scott

[rstoenescu]

Vue’s v-model does NOT works with .lazy modifier when used on Vue components. This is not related to Quasar.

[rstoenescu]

Reference: https://github.com/vuejs/vue/issues/6914

[rstoenescu]

Use the equivalent form of v-model (with value and @input/@change).
Assuming you are using v1:

<q-input :value="model" @change="e => { model = e.target.value }" />

[s.molinari]

You learn something new every day.

Scott