Vue v-model input change mobile chrome not work
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/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>
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}">
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; },}