在Vue.js中，如何获取按键事件以获取最新版本的输入？

Question

在以下代码中：

https://codepen.io/anon/pen/WYJopq

我监视按键，并尝试将输入克隆到另一个输入中，如下所示：

  [![methods: {
    clone: function() {
      this.mirror = this.original;
    }
  }]

但是克隆的输入始终是一个按键：

https://i.stack.imgur.com/y2uCA.gif

如何更新代码，使克隆的输入与原始输入完全匹配？

（注意：对于这个简单的示例，我知道有一种惯用的Vue.js处理方法，但是我特别想通过按键监视来完成此操作）

Answer 1

使用键盘，我们按以下顺序触发了三个事件：

1. keydown-在插入字符之前触发
2. keypress-插入字符时触发
3. keyup-已插入字符时触发

在这种情况下，如果您需要输入具有更新字符的字符，则应使用keyup事件，该事件是在字符插入到输入中之后的。

话虽如此，您可能应该使用@input事件，因为依赖键盘意味着您没有考虑将文本插入输入框的其他方式。例如，复制粘贴或使用屏幕键盘：

<input type="text" v-model="original" @input="clone()" />