Jak zaimplementować odbijanie w Vue2?

Question

Mam proste pole wprowadzania w szablonie Vue i chciałbym wykorzystywać zwłoki czasowej mniej więcej tak:

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

Jednak nieruchomość debounce został deprecated in Vue 2. Zalecenie mówi tylko: "używaj v-on: input + 3rd copy".

Jak prawidłowo go wdrożyć?

Starałem się go zrealizować za pomocą lodash, v-on: wejście i v model, ale zastanawiam się, czy jest to możliwe do zrobienia bez dodatkowej zmiennej.

W szablonie:

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

W skrypcie:

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

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

filterkey są następnie wykorzystywane później w computed rekwizytów.

Answer 1

Używam debounce pakiet NPM i wdrażane tak:

<input @input="debounceInput"> 

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

Korzystanie lodash i przykład w pytaniu, realizacja wygląda następująco:

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

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

Answer 2

Proszę zauważyć, że wysłałem tę odpowiedź przed zaakceptowaną odpowiedzią. To nie jest poprawne. To tylko krok naprzód w stosunku do rozwiązania w pytaniu . Zmieniłem przyjęte pytanie, aby pokazać zarówno implementację autora, jak i ostateczne wdrożenie, którego użyłem.

---

Na podstawie uwag i linked migration document, zrobiłem kilka zmian w kodzie:

W szablonie:

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

W skrypcie:

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

Metoda, która ustawia klucz filtra pozostaje taka sama:

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

To wygląda jak jeden jest mniej połączeń (tylko v-model, a nie v-on:input).