我在Vue模板中有一个简单的输入框,我想使用debounce或多或少像这样:

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

然而,在Vue 2中debounce属性已被弃用。建议只说:“使用v-on:输入+第三方反弹功能”。

如何正确地实现它?

我尝试使用lodash, v-on:input和v-model来实现它,但我想知道是否有可能没有额外的变量。

在模板:

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

在脚本:

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

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

然后在计算道具中使用过滤键。


当前回答

<template>
  <input type="text" v-model="search" @input="debouncedSearch" />
</template>

<script>
import _ from 'lodash';

export default {
  data() {
    return {
      search: '',
    };
  },
  methods: {
    search() {
      // Perform the search here
      console.log(this.search);
    },
  },
  created() {
    this.debouncedSearch = _.debounce(this.search, 1000);
  },
};
</script>

其他回答

如果你可以将debounce函数的执行移动到某个类方法中,你可以使用utils-decorators lib中的decorator (npm install——save utils-decorators):

import {debounce} from 'utils-decorators';

class SomeService {

  @debounce(500)
  getData(params) {
  }
}
<template>
  <input type="text" v-model="search" @input="debouncedSearch" />
</template>

<script>
import _ from 'lodash';

export default {
  data() {
    return {
      search: '',
    };
  },
  methods: {
    search() {
      // Perform the search here
      console.log(this.search);
    },
  },
  created() {
    this.debouncedSearch = _.debounce(this.search, 1000);
  },
};
</script>

我也有同样的问题,这里有一个解决方案,没有插件。

因为<input v-model="xxxx">与

<input
   v-bind:value="xxxx"
   v-on:input="xxxx = $event.target.value"
>

(源)

我想我可以在xxxx = $event.target.value中为xxxx赋值时设置一个debounce函数

像这样

<input
   v-bind:value="xxxx"
   v-on:input="debounceSearch($event.target.value)"
>

方法:

debounceSearch(val){
  if(search_timeout) clearTimeout(search_timeout);
  var that=this;
  search_timeout = setTimeout(function() {
    that.xxxx = val; 
  }, 400);
},

我使用debounce NPM包并像这样实现:

<input @input="debounceInput">
methods: {
    debounceInput: debounce(function (e) {
      this.$store.dispatch('updateInput', e.target.value)
    }, config.debouncers.default)
}

使用lodash和问题中的示例,实现如下所示:

<input v-on:input="debounceInput">
methods: {
  debounceInput: _.debounce(function (e) {
    this.filterKey = e.target.value;
  }, 500)
}

请注意,我在接受的答案之前发布了这个答案。这不是 正确的。这只是从解决方案向前迈进了一步 的问题。我编辑了已接受的问题,以显示作者的实现和我使用的最终实现。


基于注释和链接迁移文档,我对代码做了一些更改:

在模板:

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

在脚本:

watch: {
  searchInput: function () {
    this.debounceInput();
  }
},

设置过滤器键的方法保持不变:

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

这看起来好像少了一个调用(只是v-model,而不是v-on:input)。