vue.js:每次按键时都不会触发监视输入 [英] vue.js: Watched input not fired on every keypress

问题描述

我有一个 input 其模型属性正在被监视.问题是在 Chrome Android 设备中，并不是每次按键都调用 watch 方法.如果我点击输入文本，它就会被调用.它在过去确实有效，我不知道发生了什么.在 Chrome 桌面上它可以工作(即:text 的 watch 在每次按键时都会被调用).

I have an input whose model property is beeing watched. The problem is that the watch method is not called on every key press in Chrome Android devices. If I tap the input text, then it gets called. It did worked in the past and I don't know what happened. On Chrome Desktop it works (that is: the watch for text is beeing called on every keypress).

输入:

  <input id="input-message" ref="input-message" :disabled="disabled"
  @focus="$emit('focus')" @keyup.enter="sendMessage" 
  v-model="text" type="text" placeholder="Start typing..." 
  class="form-control">

观看:

  watch: {
    disabled: function(val) {
      if (!val) {
        this.$nextTick(() => {
          this.$refs["input-message"].focus();
        });
      }
    },
    text: function(val) {
      var mode = this.micMode;
      if (this.userAgent !== "ios") {
        let isEmpty = val.length === 0;

        if (mode === 1 && !isEmpty) {
          this.micMode = 0;
        } else if (mode === 0 && isEmpty) {
          this.micMode = 1;
        }
      }

    }
  },

推荐答案

对于需要 IME(中文、日语、韩语等)的语言，您会注意到 v-model 在 IME 组合期间不会更新.如果您也想满足这些更新，请使用输入事件相反.

For languages that require an IME (Chinese, Japanese, Korean etc.), you’ll notice that v-model doesn’t get updated during IME composition. If you want to cater for these updates as well, use input event instead.

https://vuejs.org/v2/guide/forms.html#vmodel-ime-tip

您可以将 v-model="model" 更改为 :value="text";@input=text = $event.target.value" 并且观察者应该按预期触发

you can change v-model="model" to :value="text" @input="text = $event.target.value" and the watcher should be triggered as expected

这篇关于vue.js:每次按键时都不会触发监视输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！