Vue v-model输入改变移动铬不起作用

时间:2018-05-31 06:21:23

标签: vue.js keyboard-events v-model

如果我打开https://vuejs.org/v2/guide/forms.html#Text并编辑文字,则不会影响在移动设备中输入文字。 @keyup @input @keypress - 当我输入

时,v-model不会改变
<input v-model="message" @keyup="log" placeholder="Edit">
<p>Edited: {{ message }}</p>

我该如何解决?我需要在输入时获得输入值(@keyup @input)

3 个答案:

答案 0 :(得分:6)

休斯顿我们可能有问题。 Vue似乎没有按照它在锡上所做的那样做。 V模型应该在输入时更新,但是如果我们分解v模型并明确地编码@input,它在移动设备上工作正常。 (两个输入在chrome桌面中都正常运行)

要在手机上展示,可以在以下位置看到问题: https://jsbin.com/juzakis/1

请参阅this github issue

&#13;
&#13;
function doIt(){
    var vm = new Vue({
        el : '#vueRoot',
        data : {message : '',message1 : ''}
    })
}
doIt();
&#13;
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id='vueRoot'>
<h1>v-model</h1>
  <div>
    <input type='text'
      v-model='message'
        >
    {{message}}
  </div>
  <h1>Decomposed</h1>
  <div>
    <input type='text'
        :value='message1'
        @input='evt=>message1=evt.target.value'
        >
    {{message1}}
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

好吧,我不知道该问题是否还有其他解决方案,但是可以通过一个简单的指令来解决:

Vue.directive('$model', {
    bind: function (el, binding, vnode) {
        el.oninput = () => (vnode.context[binding.expression] = el.value)
    }
})

使用就像

<input v-$model="{toBind}">

There is an issue on the oficial repo, and they say this is the normal behavior (because the composition mode), but I still need the functionality

答案 2 :(得分:0)

我尝试了所有可以在互联网上找到的解决方案,但没有任何效果。最后我想出了这个,终于可以在 android 上运行了!

技巧是使用 compositionupdate 事件:

 <input type="text" ... v-model="myinputbox" @compositionupdate="compositionUpdate($event)">
    
    ......
    ......

methods: {
    compositionUpdate: function(event)
    {
        this.myinputbox = event.data;
    },
}