@eldenhard2

Как остановить выполнение функции после выбора значения?

Реализую поиск данных через запрос к серверу.
Использую Lodash, а именно её функцию debounce.
Получаю данные, но как только выбираю необходимые,и соответственно значение в input меняется на выбранное, происходит ещё один запрос.
Как прекратить выполнение функции, после того как пользователь выбрал значение?
Использую Vue2, запросы через axios.

methods: {
        debounceHandlers(a) {
            
            this.debouncedWatch = debounce((newValue, oldValue) => {
                if (this.departure_station_name.length > 2) {
                    this.loaderInputDep = true
                    api.getCurrentStation(this.departure_station_name)
                        .then(response => {
                            this.station_departure_search = response.data.data;
                            this.loaderInputDep = false
                            this.warning = true;
                        }).catch(error => {
                            this.loaderInputDep = false
                            console.log(error.response)
                        })
                }
            }, 300)
        },

  beforeUnmount() {
        this.debouncedWatch.cancel();
    },
   watch: {
        departure_station_name(...args) {
            this.debouncedWatch(...args);
            if (this.departure_station_name == '') {
                this.warning = false
            }
        },
}

<td>
                                <div class="inputcontainer" style="height: 100% !important;">
                                    <input class="changeRow" :value="drt" v-model="departure_station_name" :type="'станция'"
                                        @input="debounceHandlers()" />
                                    <div class="icon-container" v-if="loaderInputDep">
                                        <i class="loader"></i>
                                    </div>


                                    <div class="dataDeparture" v-if="warning">
                                        <ul>
                                            <li v-for="departure in station_departure_search" :key="departure.id"
                                                @click="checkThisDeparture(departure.name, departure.code6)">
                                                {{ departure.name }} ({{ departure.code6 }})
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
  • Вопрос задан
  • 113 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Не надо ничего "останавливать". Пусть основанием для выполнения запросов будет не любое изменение данных, а только пользовательский ввод.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы