android - Vue 使用 Android Chrome 观察意外响应

Question

我有一个标记器组件可以过滤一组标记。此处为简化版:

https://codesandbox.io/s/p955o6149m

它围绕这个输入:

<input
  v-if="showInput"
  type="text"
  class="tag_input__input"
  :id="'tag_input__input' + fieldName(0,'input')"
  v-model="tag"
  @keydown.delete="deleteLast"
  @keydown.tab="autocomplete($event)"
  @blur="queueAutoComplete($event)">

还有一个观察者...

watch: {
  tag() {
    console.log("watched tag change!");
    var self = this;
    if (self.t) {
      clearTimeout(self.t);
      self.t = false;
    }
    if (self.tag.indexOf(",") >= 0) {
      var bits = self.tag.split(",");
      if (bits[0] != "") {
        this.addStringTag(bits[0].trim());
      }
    }
    self.t = setTimeout(function() {
      self.showTags();
    }, 100);
  }
}

在桌面上，效果很好:

https://youtu.be/YlyiWoVl9Ks

但在 Android Mobile Chrome 上，标记似乎几乎完全不同步:

https://youtu.be/0pZ0cXfpX4U

该模型似乎只在某些按键(如空格键或退格键)之后/之后更新。

我控制台记录了一些事情，似乎 v-model 没有更新。不过这很奇怪，因为我有一个精简版 here that works fine .

如何阻止移动设备出现延迟？

Answer 1

你可以改变

v-model="model" 

到

:value="text" 
@input="text = $event.target.value" 

并且观察者将按预期被触发。

因为

For languages that require an [IME][1] (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 eventinstead.

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