@Zewkin
Я у мамы фронтэндер

[ VUE ] Почему не работает lodash.debounce?

props: {
  delay: Number,
}

watch: {
    q: _.debounce(
      function() {
        console.log(this.delay); // значение на месте
        if (this.q.length >= this.minLength) {
          this.autocomplete();
        }
      }, this.delay // - не работает, если захардкодить значение - работает
    )
  },


Что я делаю не так? Спасибо.
  • Вопрос задан
  • 6461 просмотр
Решения вопроса 1
Методы инициализируются в контексте window, у которого нет вашего window.delay, а если и есть, то не тот.
У вас q создается через вызов метода debounce lodash.
Потом уже Vue биндит инстанс компонента.

Еще один пропаченый вариант ( на codepen ) из документации
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script>
<div id="debounce-search-demo">
  <input v-model="searchQuery" placeholder="Type something">
  <strong>{{ searchIndicator }}</strong>
</div>

new Vue({
  el: '#debounce-search-demo',
  data: {
    searchQuery: '',
    searchQueryIsDirty: false,
    isCalculating: false,
    delay: 5000
  },
  computed: {
    searchIndicator() {
      if (this.isCalculating) {
        return '⟳ Fetching new results'
      } else if (this.searchQueryIsDirty) {
        return '... Typing'
      } else {
        return '✓ Done'
      }
    },
    debouncedSearch() {
      return _.debounce(this.search, this.delay)
    }
  },
  watch: {
    searchQuery: function () {
      this.searchQueryIsDirty = true
      this.expensiveOperation()
    }
  },
  methods: {
    // This is where the debounce actually belongs.
    expensiveOperation: function(){
      return this.debouncedSearch()
    },
    search() {   
      this.isCalculating = true
      setTimeout(() => {
        this.isCalculating = false
        this.searchQueryIsDirty = false
      }, 10000)
    },
  }
})
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
@kristenstewartdadada
Frontend Developer
вместо function() {} сделайте () => {} для передачи контекста
Ответ написан
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Наверное как-то так:
watch: {
  q(v) { _.debounce(() => {
          console.log(this.delay)
            if (v.length >= this.minLength) {
              this.autocomplete();
            }
         }, this.delay)
      }
  },
Ответ написан
lavezzi1
@lavezzi1
<template>
  <button @click="throttledMethod()">Click me as fast as you can!</button>
</template>


<script>
import _ from 'lodash'

export default {
  methods: {
    throttledMethod: _.debounce(() => {
      console.log('I only get fired once every two seconds, max!')
    }, 2000)
  }
}
</script>
Ответ написан
webcrab
@webcrab
Frontend Developer
{
  methods: {
    handler (value) {
      console.log(value)
    }
  },
  computed: {
    debouncedHandler() {
      return _.debounce(this.handler, this.delay)
    }
  }
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы