Question

在Android上，除非有数字或空格键，否则v-model的长度在keyup上将返回0。有谁知道这是为什么，以及如何使它触发keyup事件，而不管它是什么密钥并获得长度？这是我所拥有的清理版本：

<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。此功能适用于Android以外的所有浏览器和设备。

Answer 1

在某些情况下，有时模型无法在移动设备上更新。 Issue on Forum（当前），Another from Forum

您还可以显式地对v模型进行编码，它在android和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>

Android上的Vue.js keyup事件和v模型长度未按预期工作

1 个答案: