Как реализовать debounce в Vue2?

Question

У меня есть простое поле ввода в шаблоне Vue, и я хотел бы использовать дребезг более или менее, как это:

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

Однако debounce имущества было deprecated in Vue 2. В рекомендации говорится: «использовать v-on: вход + функция дебаза третьей стороны».

Как вы его правильно реализуете?

Я пытался реализовать его с помощью lodash, v-на: вход и v-модель, но мне интересно, если это можно сделать без дополнительной переменной.

В шаблоне:

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

В сценарии:

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

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

filterkey затем используется позже в computed реквизита.

Answer 1

Я использую debounce НПМ пакет и реализуется следующим образом:

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

Answer 2

Обратите внимание, что я отправил этот ответ перед принятым ответом. Это не правильно. Это только шаг вперед от решения в вопросе . Я отредактировал принятый вопрос, чтобы показать как реализацию автора, так и конечную реализацию, которую я использовал.

---

на основе замечаний и linked migration document, я сделал несколько изменений в коде:

В шаблоне:

<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).