我在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)
}

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


当前回答

在方法中分配debounce可能会很麻烦。所以不要这样:

// Bad
methods: {
  foo: _.debounce(function(){}, 1000)
}

你可以试试:

// Good
created () {
  this.foo = _.debounce(function(){}, 1000);
}

如果您有一个组件的多个实例,这就会成为一个问题——类似于数据应该是一个返回对象的函数。每个实例都需要自己的debounce函数,如果它们被认为是独立的。

这里有一个问题的例子:

Vue.component('counter', { template: '<div>{{ i }}</div>', data: function(){ return { i: 0 }; }, methods: { // DON'T DO THIS increment: _.debounce(function(){ this.i += 1; }, 1000) } }); new Vue({ el: '#app', mounted () { this.$refs.counter1.increment(); this.$refs.counter2.increment(); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script> <div id="app"> <div>Both should change from 0 to 1:</div> <counter ref="counter1"></counter> <counter ref="counter2"></counter> </div>

其他回答

如果你正在使用Vue,你也可以使用v.model.lazy而不是debounce,但记住v.model.lazy并不总是有效,因为Vue限制它用于自定义组件。

对于自定义组件,您应该使用:value和@change.native

<b-input:value="data" @change。Native ="data = $event.target. "价值”> < / b-input >

我可以用很少的实现来使用debounce。

我使用Vue 2.6.14与boostrap-vue:

把这个pkg加到你的包裹里。json: https://www.npmjs.com/package/debounce

将此添加到main.js:

import { debounce } from "debounce";
Vue.use(debounce);

在我的组件中,有这样的输入:

          <b-form-input
            debounce="600"
            @update="search()"
            trim
            id="username"
            v-model="form.userName"
            type="text"
            placeholder="Enter username"
            required
          >
          </b-form-input>

它所做的就是调用search()方法,而搜索方法使用表单。执行搜索的用户名。

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

因为<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);
},

这里有一种方法

... <输入v模型= " searchInput " > ... 设置(){ const searchInput = ref(null) const timeoutID = ref(null) watch(searchInput, (new, old) => { clearTimeout (timeoutID.value) timeoutID。value = setTimeout(() => { //调用搜索函数 }, 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>