Vue v-модель ввода изменить мобильный Chrome не работает - PullRequest
Новая
       12

Vue v-модель ввода изменить мобильный Chrome не работает

0 голосов
/ 31 мая 2018

Если я открою https://vuejs.org/v2/guide/forms.html#Text и отредактирую текст - не влияет на ввод текста в мобильном браузере Chrome.@keyup @input @keypress - v-модель не меняется, когда я печатаю 

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

Как я могу это исправить?Мне нужно получить входное значение при наборе (@keyup @input)

Ответы [ 2 ]

0 голосов
/ 09 августа 2018

Хорошо, я не знаю, есть ли другое решение для этой проблемы, но оно может быть решено с помощью простой директивы: 

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

, используя его так же, как

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

Существует проблема с официальным репо, и они говорят, что это нормальное поведение (потому что режим композиции), но мне все еще нужна функциональность

0 голосов
/ 31 мая 2018

Хьюстон, у нас может быть проблема.Vue, кажется, не делает то, что говорит на жестяной банке.Предполагается, что V-модель будет обновляться при вводе, но если мы разложим v-модель и явно закодируем @input, она отлично работает на мобильных устройствах.(оба входа ведут себя нормально в Chrome Desktop)

Для отображения на мобильных устройствах проблема может быть замечена в ... https://jsbin.com/juzakis/1

См. эта проблема github . 

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