Vue v-model输入更改移动chrome不起作用答案

【问题标题】：Vue v-model input change mobile chrome not workVue v-model输入更改移动chrome不起作用
【发布时间】：2018-11-10 02:05:19
【问题描述】：

如果我打开 https://vuejs.org/v2/guide/forms.html#Text 并编辑文本 - 对在移动 chrome 中输入文本没有影响。 @keyup @input @keypress - 我输入时 v-model 不会改变

<input v-model="message" @keyup="log" placeholder="Edit">
<p>Edited: {{ message }}</p>

我该如何解决？我需要在输入时获取输入值（@keyup @input）

【问题讨论】：

在移动设备上尝试 @change 事件。

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

【解决方案1】：

更新：经过大量讨论，我开始明白这是一项功能，而不是错误。 v-model 比您最初想象的要复杂，移动“键盘”比键盘更复杂。这种行为可能会令人惊讶，但这并没有错。如果您需要其他内容，请单独对 @input 进行编码。

休斯顿我们可能有问题。 Vue 似乎并没有像它所说的那样做。 V-model 应该在输入时更新，但如果我们分解 v-model 并显式编码 @input，它在移动设备上可以正常工作。（两个输入在 chrome 桌面上都表现正常）

对于在手机上显示，可以在... https://jsbin.com/juzakis/1

见this github issue。

function doIt(){
    var vm = new Vue({
        el : '#vueRoot',
        data : {message : '',message1 : ''}
    })
}
doIt();

<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>

【讨论】：

谢谢，这对我来说很好用。但这有解释吗？我只在我们的一台测试设备上遇到过这种行为。
I submitted this issue 在 github 上，很快就关闭了。显然，并非所有设备都受到影响。任何发现自己在这里的人都可能想对已关闭的问题发表评论。在办公室，问题出现在测试的 5 个机器人中的 5 个上，包括 Galaxy S4 => S9。
经过大量讨论，我开始明白这是一个功能，而不是一个错误。 v-model 比锡上说的要复杂一些。
“锡”是什么意思？
...包装，指南，

【解决方案2】：

好的，我不知道这个问题是否有其他解决方案，但可以通过一个简单的指令来解决：

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

【讨论】：

【解决方案3】：

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

技巧是使用compositionupdate事件：

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

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

【讨论】：