Skip to content

Prop options not always updated correctly #1505

@Mr-Looper

Description

@Mr-Looper

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>

In browser previous to search
image

Case 1: Searching with results and showing the options
image

Case 2: Searching with results but not showing the options
image
In this case, myOptions is correctly updated, but according to vue-select, has no-options.

With dev tools, the options have data
image

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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions