javascript vue.js keyup, keydown 事件落后一字符

vue.js keyup, keydown events one character behind

提问by farbodg

I'm using the keydown/keyup events which call a javascript function that prints the value of input box to the console (and also the value of the currentTarget field of the event), and I am noticing it is a character late. For example, if I type hellointo the input box, I only see hellin the console, until I press another key and then I see hello, even though by this point I've typed hello1. Why is this? And is there anyway around it?

我正在使用 keydown/keyup 事件，它调用一个 javascript 函数，该函数将输入框的值打印到控制台（以及事件的 currentTarget 字段的值），我注意到它是一个字符。例如，如果我在输入框中输入hello，我只会在控制台中看到地狱，直到我按下另一个键然后我看到hello，即使此时我已经输入了hello1。为什么是这样？它周围有吗？

Here's the HTML:

这是 HTML：

<input type="text" class="form__field" v-model="keywords" v-on:keyup.enter="queryForKeywords" v-on:keydown="queryForKeywords">

And the JS:

和 JS：

queryForKeywords: function(event) {
        var self = this;
        if (this.keywords.length > 2) {
            console.log("keywords value: " + this.keywords);
            console.log("event value: " + event.currentTarget.value);
    }

采纳答案by thanksd

Because you are depending on the input's v-modelto update the keywordsproperty, the value won't update until the Vue component has re-rendered.

因为您依赖于输入v-model来更新keywords属性，所以在 Vue 组件重新渲染之前，该值不会更新。

You can access the updated value of keywordsin a callback passed to this.$nextTicklike in this example:

您可以访问在此示例中keywords传递给this.$nextTicklike的回调中的更新值：

new Vue({
  el: '#app',
  data() {
    return { keywords: '' }
  },
  methods: {
    queryForKeywords: function(event) {
      this.$nextTick(() => {
        if (this.keywords.length > 2) {
         console.log("keywords value: " + this.keywords);
        }
      });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <input type="text" class="form__field" v-model="keywords" v-on:keyup.enter="queryForKeywords" v-on:keydown="queryForKeywords">
</div>

回答by Andres Felipe

The currently accepted answer is for an old version of vue, in the latest versions should be used @input instead of keypress or keyup.

当前接受的答案是针对旧版本的 vue，在最新版本中应使用 @input 而不是 keypress 或 keyup。

回答by roli roli

The real problem doesn't has to do with vue.js at all

真正的问题根本与 vue.js 无关

The problem hides behind the keydownevent!

问题隐藏在keydown事件背后！

So when the event fires, the input value is NOT updated yet. Fiddle example

因此，当事件触发时，输入值尚未更新。小提琴示例

MDN - keydown event

MDN - 按键事件

In general, keydownit is used for informing you which key is pressed. And you can access it like this:

通常，keydown它用于通知您按下了哪个键。您可以像这样访问它：

document.addEventListener('keydown', logKey);

function logKey(e) {
  console.log(e.key)
}

---

---

As solution, you can use the keyupevent: Fiddle

作为解决方案，您可以使用keyup事件：Fiddle

My recommendation is to use a custom v-modelusing :valueand the @inputevent.

我的建议是使用自定义 v-modelusing:value和@inputevent。

<input type="text" :value="keywords" @input="queryForKeywords">

And the script:

和脚本：

  data: {
    keywords: ''
  },

  methods: {
     queryForKeywords(event) {
       const value = event.target.value
         this.keywords = value
       if (value.length > 2) {
            console.log("keywords value: " + this.keywords);
       }
    }
  }

See it in action

看到它在行动