本文介绍了如何在 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">

然而,debounce 属性在 Vue 2 中已被弃用.建议只说:使用 v-on:input + 3rd party debounce function".

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

您如何正确实施它?

我尝试使用 lodashv-on:inputv-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)
}

随后在 computed 道具中使用过滤器键.

The filterkey is then used later in computed props.

推荐答案

我正在使用 debounceNPM 包并实现如下:

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 中实现去抖动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-05 18:54