web-dev-qa-db-ja.com

Vue v-model input change mobile chrome not work

https://vuejs.org/v2/guide/forms.html#Text を開いてテキストを編集すると、モバイルクロムでのテキスト入力に影響しません。 @keyup @input @keypress-入力しているときにvモデルが変更されない

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

どうすれば修正できますか？入力時に入力値を取得する必要があります（@keyup @input）

vue.jskeyboard-eventsv-model
8
ebyratu

更新：多くの議論の末、これはバグではなく機能であることを理解しました。 v-modelは、ブリキで言うよりも少し複雑で、モバイルの「キーボード」はキーボードよりも複雑です。この動作は驚くかもしれませんが、それは間違いではありません。他のものが必要な場合は、@ inputを個別にコーディングしてください。

ヒューストン、問題があるかもしれません。 Vueは、缶に書かれていることを実行していないようです。Vモデルは入力時に更新されるはずですが、Vモデルを分解して@inputを明示的にコーディングすると、機能しますモバイルでは問題ありません（両方の入力がchromeデスクトップで正常に動作します）

携帯電話での表示の場合、問題は次の場所で確認できます... 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/[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>
8
bbsimonbb

わかりました、この問題の別の解決策があるかどうかはわかりませんが、簡単なディレクティブで解決できます：

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

ちょうどそれを使う

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

公式リポジトリに問題があり、これは通常の動作であると言われていますが（コンポジションモードのため））、私はまだ機能が必要です

1
Diego Meza