Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 999
nunya Avatar asked Jul 26 '18 20:07

nunya


People also ask

Does Keydown work on mobile?

It works on computers, but not on mobile..

What is V model lazy in Vue?

lazy. By default, v-model syncs with the state of the Vue instance (data properties) on every input event - which means every single time the value of our input changes. The . lazy modifier changes our v-model so it only syncs after change events. The change event is triggered when a change is commited.

What is event Keyup?

The keyup event is fired when a key is released. The keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered.

Can I use Vue js instead of jQuery?

Although you can replace jQuery with Vue, you'll need to change your mindset about how to solve Web development problems.


1 Answers

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/[email protected]/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>
like image 170
Helping hand Avatar answered Oct 21 '22 19:10

Helping hand