Это не определено в Vue с использованием метода debounce - PullRequest
Новая
       17

Это не определено в Vue с использованием метода debounce

2 голосов
/ 29 мая 2020

Я знаю, что использование синтаксиса стрелки для метода приведет к тому, что 'this' не будет сопоставлено с экземпляром Vue, однако в моем примере я использую loda sh .debounce, и, насколько мне известно Я не использую здесь синтаксис стрелки?

Возвращает Невозможно прочитать свойство $ emit для undefined 

methods: {
  onChange: debounce(function(el) {
    this.$emit('change', el.target.value)
  }, 1000)
}

есть ли синтаксическая ошибка в как я пишу эту функцию противодействия без обозначения стрелок?

1 Ответ

1 голос
/ 29 мая 2020

Ваш код должен работать. Можете ли вы предоставить дополнительный контекст?

Небольшое улучшение: обычно лучше создавать дебаунтированную функцию для каждого экземпляра, а не использовать ее для всех экземпляров этого компонента. 

methods: {
  onChange(e) {
    this.$emit('change', e.target.value)
  }
},

created() {
  this.onChange = _.debounce(this.onChange, 1000)
}

Вот рабочий например: 

new Vue({
  el: '#app',
  
  data: {
    text: '',
  },
  
  created() {
    this.onClick = _.debounce(this.onClick, 1000)
  },
  
  methods: {
    onClick() {
      // this is not undefined here
      this.text += 'Debounced! ';
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button @click="onClick">Click Me</button>
  <p>{{ text }}</p>
</div>
...