_.Debounce () Lodash не работает в Vue.js
Я пытаюсь запустить метод query() при изменении свойства компонента q в Vue.js.
Это не удается, потому что this.query() не определен. This относится к экземпляру моего компонента, но почему-то не содержит методов.
Вот соответствующая часть кода, где я пытаюсь просмотреть свойство компонента q и запустить функцию query():
methods: {
async query() {
const url = `https://example.com`;
const results = await axios({
url,
method: 'GET',
});
this.results = results.items;
},
debouncedQuery: _.debounce(() => { this.query(); }, 300),
},
watch: {
q() {
this.debouncedQuery();
},
},
Ошибка:
TypeError: _this2.query is not a function
Если я напишу вызов debounce(), как показано ниже, ошибка TypeError: expected a function появится еще раньше, при загрузке страницы.
debouncedQuery: _.debounce(this.query, 300),
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Проблема возникает из-за лексической области действия стрелочной функции, которую вы определяете в _.debounce. this привязан к объекту, в котором вы его определяете, а не к созданному экземпляру Vue.
Если вы отключите функцию стрелки для обычной функции, область видимости будет привязана правильно:
methods: {
// ...
debouncedQuery: _.debounce(function () { this.query(); }, 300)
}
Отлично работает, но eslint жалуется на файлы .vue "no-invalid-this".
странно, использование этого точного синтаксиса не запускает this.query() для меня
Мне нужно было связать это при создании, чтобы он работал, вероятно, как проблема @BuddyZ. data() { return { searchCustomersDebounced: null, },created() { this.debouncedQuery = _.debounce( () => { this.query(); }, 1000 );},
Мы можем сделать это с помощью простого JS (ES6) с несколькими строками кода:
function update() {
if (typeof window.LIT !== 'undefined') {
clearTimeout(window.LIT);
}
window.LIT = setTimeout(() => {
// do something...
}, 1000);
}
Блин! Спасибо. Я был уверен, что попробовал и этот вариант. Оно работает