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

Posted 2021-03-30

如果我打开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）

答案

休斯顿我们可能有问题。 Vue似乎没有按照它在锡上所做的那样做。 V模型应该在输入时更新，但是如果我们分解v模型并明确地编码@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>

另一答案

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

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

以上是关于Vue v-model输入改变移动铬不起作用的主要内容，如果未能解决你的问题，请参考以下文章

除非我刷新页面，否则 Vue data() 对象输入 v-model 不起作用

如何在 vue 中绑定“v-model”属性？

如何 Vue 让输入值 v-model 与 v-bind:value 操作

为啥我在 Vue 中的移动标签效果不起作用？

Vue中v-model基本使用

NativeScript-vue 自定义开关不起作用