web-dev-qa-db-fra.com

Vue v-modèle changement d'entrée mobile chrome ne fonctionne pas

Si j'ouvre https://vuejs.org/v2/guide/forms.html#Text et modifie le texte - aucun effet sur la saisie de texte en chrome mobile @keyup @input @keypress - v-model ne change pas lorsque je tape 

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

Comment puis-je résoudre ce problème? J'ai besoin d'obtenir une valeur d'entrée lors de la frappe (@keyup @input)

vue.jskeyboard-eventsv-model
5
ebyratu

Houston, nous pourrions avoir un problème. Vue ne semble pas faire ce qui est écrit sur l'étain. Le modèle v est censé se mettre à jour en entrée, mais si nous décomposons le modèle v et codons explicitement le @input, cela fonctionne correctement sur mobile. (les deux entrées se comportent normalement en chrome)

Pour l'affichage sur les téléphones mobiles, vous pouvez consulter le problème à l'adresse suivante: ... https://jsbin.com/juzakis/1

Voir ce numéro de github .

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>

6
bbsimonbb

Ok, je ne sais pas s’il existe une autre solution à ce problème, mais elle peut être résolue avec une simple directive:

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

l'utiliser juste comme

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

Il y a un problème sur le rapport officiel, et ils disent que c'est le comportement normal (parce que le mode de composition), mais j'ai toujours besoin de la fonctionnalité

1
Diego Meza