Дросселирование или устранение отклонений асинхронных вызовов в Vue 2 при передаче аргументов в дебаунтированную функцию

Я столкнулся с той же проблемой при использовании lodash.debounce. Я большой поклонник синтаксиса стрелок, но я обнаружил, что это приводит к сбою _.throttle(), _.debounce() и т. Д.

Очевидно, мой код отличается от вашего, но я сделал следующее, и он работает:

export default {
   ...,
   methods: {
     onClick: _.debounce(function() {
       this.$emit('activate', this.item)
     }, 500)
  }
}

Несмотря на то, что я не использую здесь синтаксис стрелок, this по-прежнему ссылается на компонент внутри отклоненной функции.

В вашем коде это будет выглядеть так:

export default {
  ...,
  methods: {
    getWorksAsync: throttle(function(term) {
      // the plan is to replace this with an API call
      this.works = this.worksList.filter(work => titleMatches(work, term));
    }, 200)
  }
}

Надеюсь, это поможет!

Мне не удалось найти ответ на SO (или где-либо еще) для этого, но в конце концов я собрал его методом проб и ошибок, а также из связанных материалов здесь и в документации.

То, что сработало, чего я не делал, и почему

Можно получить значение напрямую, используя запрос JavaScript DOM, а также можно покопаться в структуре компонента множественного выбора и получить значение. Первое решение обходит фреймворк, второе зависит от недокументированных атрибутов компонента множественного выбора. Я избегаю обоих этих решений как неидиоматических и хрупких.

Мое текущее решение

1. Обновил атрибут компонента всякий раз, когда в поле поиска появлялось событие изменения. Это позволило мне захватить строку запроса пользователя.
2. Вызвал мою регулируемую асинхронную функцию из прослушивателя событий.
3. Передал обычный function вместо функции стрелки в throttle, который дал правильный this (компонент Vue).

Если у кого-то есть предложение, как лучше сделать это в Vue 2, я все слышу.

Вот как в итоге выглядело мое решение:

<template>    
  <div>
    <label
      class="typo__label"
      for="ajax">Async select</label>
    <multiselect
      id="ajax"
      v-model="selectedWork"
      label="title"
      track-by="id"
      placeholder="Type to search"
      :options="works"
      :searchable="true"
      :loading="isLoading"
      :internal-search="false"
      :multiple="false"
      :clear-on-select="true"
      :close-on-select="true"
      :options-limit="300"
      :limit="3"
      :limit-text="limitText"
      :max-height="600"
      :show-no-results="false"
      open-direction="bottom"
      @select="redirect"
      @search-change="updateSearchTerm">
      <span slot="noResult">Oops! No elements found. Consider changing the search query.</span>
    </multiselect>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';
  import { throttle } from 'lodash';

  import Multiselect from 'vue-multiselect'

  export default {
    components: {
      Multiselect
    },
    data() {
      return {
        searchTerm: '',
        selectedWork: {},
        works: [],
        isLoading: false
      }
    },
    computed: {
      ...mapGetters(['worksList']),
    },
    methods: {
      limitText(count) {
        return `and ${count} other works`;
      },
      redirect(work) {
        // redirect to selected page
      },
      updateSearchTerm(term){
        this.searchTerm = term;
        this.isLoading = true;
        this.getWorksAsync();
      },
      getWorksAsync: throttle(function() {
        const term = this.searchTerm.toLowerCase();
        callMyAPI(term)
        .then(results => {
            this.works = results;
            this.isLoading = false;
        })
      }, 200)
    }
  }

</script>