_.Debounce () Лодаша не работает в Vue.js - PullRequest
Новая
       14

_.Debounce () Лодаша не работает в Vue.js

0 голосов
/ 29 октября 2018

Я пытаюсь запустить метод с именем 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 не является функцией

Если я напишу вызов debounce(), как показано ниже, ошибка TypeError: expected a function появляется еще раньше, при загрузке страницы. 

debouncedQuery: _.debounce(this.query, 300),

Ответы [ 2 ]

0 голосов
/ 08 июля 2019

Мы можем сделать это простым JS (ES6) с несколькими строками кода: 

function update() {

    if(typeof window.LIT !== 'undefined') {
        clearTimeout(window.LIT);
    }

    window.LIT = setTimeout(() => {
        // do something...
    }, 1000);

}

Надеюсь, это будет полезно:)

0 голосов
/ 29 октября 2018

Проблема связана с лексической областью функции стрелки, которую вы определяете в _.debounce. this привязан к объекту, в котором вы его определяете, а не к инстанцированному экземпляру Vue.

Если вы отключите свою функцию стрелки для обычной функции, область действия будет правильно привязана: 

methods: {
  // ...
  debouncedQuery: _.debounce(function () { this.query(); }, 300)
}
...