-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Description
First of all, I can't say exactly how to reproduce this because it just happen sometimes. But this is how i got the problem.
I have a component using vue-select wich allows me to load options on search from an API. (kind of an autocomplete)
When I type something in the input search, calls a function that gets and format the data and then return it to the component
Currently, i'm calling a google api to get matched addresses.
I've already verified that no other function is interfering on this.
Function
onSearch (search) {
this.noResults = false
this.searchOnType.fx(search)
.then(resp => {
if (resp.length > 0) {
this.myOptions = [...resp]
} else {
this.noResults = true
}
})
.catch(err => {
this.noResults = true
})
}
searchOnType.fx is just the function that calls the api.
Using function
<template>
<div>
<v-select v-model="myValue" @input="onChange"
:id="id"
label="text"
:options="myOptions"
@search="onSearch">
<template #no-options="{ search, searching }">
<div>Showing no-options</div>
<div>My options: {{myOptions}}</div>
<div>Search: {{search}}</div>
<div>Searching: {{ searching }}</div>
</template>
</v-select>
</div>
</template>
Case 1: Searching with results and showing the options

Case 2: Searching with results but not showing the options

In this case, myOptions is correctly updated, but according to vue-select, has no-options.
With dev tools, the options have data

Another example just to verify that isn't the string length

A simple logic. I call an api on search, then add the options.
I've tried many things but the status the options dropdown is not always updated and I need to blur and focus again de input search just for the options to be shown
This is the service that backend calls
https://maps.googleapis.com/maps/api/geocode/json?address=tal&key=API_KEY
