7

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.

Pravin Divraniya
  • 4,223
  • 2
  • 32
  • 49
nunya
  • 305
  • 1
  • 5
  • 17
  • It's a vue "feature". See this https://github.com/vuejs/vue/issues/8231 and this https://github.com/vuejs/vue/issues/8723 – Richrd Aug 28 '18 at 17:25

1 Answers1

17

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>
Helping hand
  • 2,800
  • 2
  • 19
  • 31
  • 1
    That did the trick. I can't thank you enough. I spent a couple days trying many different ways around this and came up short every time. Cheers. – nunya Jul 30 '18 at 18:19
  • @nunya if this solved your issue, could you accept it as the answer? This will help future readers who have similar questions/problems find the solution easier. – petey Jul 30 '18 at 19:50
  • 3
    Yikes - 2021 and this is still an issue! how is that possible. Thanks for the answer – Andrew MacNaughton May 06 '21 at 18:27
  • I'm trying on Android (chrome and edge) and it's not working even with this answer. The model is filled only if input loses focus (if I click outside of it) – madsongr Jul 08 '21 at 21:45
  • @madsongr maybe you're using onchange instead of oninput? – Ronen Teva Jul 18 '21 at 12:17
  • @RonenTeva Hi. I made some changes and it's working as the answer above. Thanks! – madsongr Jul 19 '21 at 18:30