如何在Vue2中实现反跳功能？ [英] How to implement debounce in Vue2?

问题描述

我在Vue模板中有一个简单的输入框，我想像这样使用防抖：

I have a simple input box in a Vue template and I would like to use debounce more or less like this:

<input type="text" v-model="filterKey" debounce="500">

但是防反跳属性为在Vue 2中已弃用。建议只说：使用v-on：input +第三方防抖功能。

However the debounce property has been deprecated in Vue 2. The recommendation only says: "use v-on:input + 3rd party debounce function".

您如何正确实现它？

我尝试使用 lodash ， v-on：input 和 v-model 来实现它，但是我

I've tried to implement it using lodash, v-on:input and v-model, but I am wondering if it is possible to do without the extra variable.

在模板中：

<input type="text" v-on:input="debounceInput" v-model="searchInput">

在脚本中：

data: function () {
  return {
    searchInput: '',
    filterKey: ''
  }
},

methods: {
  debounceInput: _.debounce(function () {
    this.filterKey = this.searchInput;
  }, 500)
}

然后稍后在计算道具。

推荐答案

我正在使用 debounce NPM软件包，并按以下方式实现：

I am using debounce NPM package and implemented like this:

<input @input="debounceInput">

methods: {
    debounceInput: debounce(function (e) {
      this.$store.dispatch('updateInput', e.target.value)
    }, config.debouncers.default)
}

使用 lodash 和问题中的示例，实现看起来像这样：

Using lodash and the example in the question, the implementation looks like this:

<input v-on:input="debounceInput">

methods: {
  debounceInput: _.debounce(function (e) {
    this.filterKey = e.target.value;
  }, 500)
}

这篇关于如何在Vue2中实现反跳功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！