Vue v-model input change mobile chrome not work

Question

If i open https://v2.vuejs.org/v2/guide/forms.html#Text and edit text - no effect on typing text in mobile chrome. @keyup @input @keypress - v-model does not change when I'm typing

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

How can i fix it? I need get input value on typing (@keyup @input)

Answer 1

Update: After a lot of discussion, I've come to understand that this is a feature, not a bug. v-model is more complicated than you might at first think, and a mobile 'keyboard' is more complicated than a keyboard. This behaviour can surprise, but it's not wrong. Code your @input separately if you want something else.

---

Houston we might have a problem. Vue does not seem to be doing what it says on the tin. V-model is supposed to update on input, but if we decompose the v-model and code the @input explicitly, it works fine on mobile. (both inputs behave normally in chrome desktop)

For display on mobiles, the issue can be seen at... https://jsbin.com/juzakis/1

See this github issue.

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Answer 2

I tried all solutions I could find on the internet, nothing worked for me. in the end i came up with this, finally works on android!

Trick is to use compositionupdate event:

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

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

Answer 3

Ok, I dont know if there is another solution for this issue, but it can be solved with a simple directive:

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

using it just like

<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