Search code examples
javascriptvue.jskeyup

Vue.js keyup events and v-model length on Android not working as expected


On Android the length of v-model is returning 0 on keyup unless its a number or the space bar key. Does anyone know why that is and how to make it fire the keyup event no matter what key it is and get the length? Here is a cleaned up version of what I have:

<template>
  <div class="typeahead">
    <input
      v-model="query"
      v-on:keyup="suggestTerms"
      >
  </div>
</template>

<script>
export default {
  data () {
    return {
      query: '',
    }
  },
  methods: {
    suggestTerms () {
      console.log('query length = ' + this.query.length);
    }
  }
}
</script>

P.S. This works on every browser and device except Android.


Solution

  • There have been instances when v-model didn't update on mobile in some cases. Issue on Forum (current), Another from Forum

    You can also code the v-model explicitly, it works in both android and pc.

    function callMe(){
        var vm = new Vue({
            el : '#root',
            data : {query : ''},
            methods: {
              suggestTerms () {
                console.log('query length = ' + this.query.length);
              }
            }
        })
    }
    callMe();
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script>
    <div id='root'>
      <h3>Decomposed</h3>
      <div>
        <input type='text' :value='query' @input='evt=>query=evt.target.value' v-on:keyup="suggestTerms">
        
        <b>{{query}}({{query.length}})</b>
        
      </div>
    </div>