Проблема с регулированием ajax запросов с использованием vue -multiselect и lodash - PullRequest
Новая
       70

Проблема с регулированием ajax запросов с использованием vue -multiselect и lodash

0 голосов
/ 05 мая 2020

У меня есть приложение vue, содержащее vue -multiselect , и я хочу загрузить параметры множественного выбора через ajax. Я использую loda sh .throttle , чтобы ограничить выполнение запросов ajax, когда пользователь вводит критерии поиска. Но что бы я ни делал, я вижу, что для каждого символа, который я набираю в поиске, запускается несколько запросов. Что я делаю не так? Заранее спасибо. 

<template>
<multiselect :options="allLocations.map(p => p.externalId)" 
                :searchable="true" 
                :custom-label="uuid => {const sel = allLocations.filter(s => s.externalId === uuid); return sel.length === 1 ? sel[0].name + ' (' + sel[0].type + ')' : '';}" 
                class="mx-1 my-1" 
                style="width:500px;" 
                v-model="locations"
                :clear-on-select="true" 
                :close-on-select="false" 
                :show-labels="true" 
                placeholder="Pick Locations to filter" 
                :multiple="true" 
                :loading="locationsLoading" 
                :internal-search="false"
                @search-change="findLocations"
                @input="updateLocations" 
                :allowEmpty="true" />
</template>
<script>
import {throttle} from 'lodash'
export default {
name: 'test-throttle-component',
data() {
allLocations: [],
locationsLoading: false,
locations: [],
},
methods: {
findLocations(search) {
      this.$log.debug("Going to find locations for search criteria", search)
      const params = {search: search}
      this.locationsLoading = true
      const self = this
      throttle(() => self.$http.get("locations/ddlist", {params}).then(res => {
        self.allLocations = res.data.items
        self.locationsLoading = false
      }), 5000)()
    },
updateLocations() {
      const self = this
      this.$store.dispatch('updateSelectedLocations', this.locations)
        .then(() => self.emitRefresh())
    },
}
}
</script>

Ответы [ 2 ]

0 голосов
/ 05 мая 2020

@ strelok2010 почти прав, но я думаю, он упустил из виду тот факт, что обработчик vue multiselect @ search-change ожидает обработчика, который принимает аргумент поиска, и поэтому код не будет работать как есть. Также я думаю, что это не разрешит компонент внутри функции стрелки, поэтому вам, возможно, придется использовать стандартную функцию JS. Вот что, я думаю, сработает. 

findLocations: throttle(function(search) {
      this.$log.debug("Going to find locations for search criteria", search)
      const params = {search: search}
      const self = this
      this.locationsLoading = true
      self.$http.get("locations/ddlist", {params}).then(res => {
        self.allLocations = res.data.items
        self.locationsLoading = false
      }
}, 5000)
0 голосов
/ 05 мая 2020

Попробуйте обернуть метод findLocations в функцию throttle: 

findLocations: throttle(() => {
      this.$log.debug("Going to find locations for search criteria", search)
      const params = {search: search}
      const self = this
      this.locationsLoading = true
      self.$http.get("locations/ddlist", {params}).then(res => {
        self.allLocations = res.data.items
        self.locationsLoading = false
      }
}, 5000)

Подробнее здесь

...