Реализую поиск данных через запрос к серверу.
Использую 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>