QSelect to fetch data from server

[Crazralfrill]

Hello,

I’m trying to use QSelect to show and filter data from a server.

So I want my q-select to be empty at first, and when the user starts to type 1 or 2 characters, it sends a request to the server to get the select values.

I don’t understand how to do it.
I tried to populate the select with the @filter event :

fetchSources (val, update) {
     update(
         () => {
            // get data from server
            this.options = [{value:"test2",  label:"test2"}]
         })
   },

But it does nothing because it needs the “test2” options already exists in the :options prop of q-select.

So what’s the proper way to implement this ?

Thanks.

[metalsadman]

@Crazralfrill use one of this example https://quasar.dev/vue-components/select#Example--Lazy-filtering, at filterFn call your api instead and populate your options according to the returned data.

[Crazralfrill]

@metalsadman That’s what I did, but in the example, the options prop is set as

stringOptions = [
  'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
]

My code :

<q-select
                  v-model="sources"
                  multiple
                  use-input
                  @filter="fetchSources"
                  :options="[]"
                  style="width:300px"
                  label="Filtrer par source"
                />

And I call update to set this.options but it’s not working unless the options props of QSelect already contains the value returned in fetchSources.
Which is useless of course, because I want the options to be dynamic and dependant of the server returned values.

[metalsadman]

@Crazralfrill the logic is already there, it’s your concern how to populate your data.

[Crazralfrill]

@metalsadman What do you mean ?
I’m calling this.options = [{"value": test2, "label": "test2"}]; in fetchSources (post #1) but it does nothing.
It should display the “test2” option but it displays nothing.

[metalsadman]

@Crazralfrill explain what does nothing? https://codepen.io/metalsadman/pen/BaKZoWo

because you are setting your :options="[]" with an empty array inline, hence this.options = [{"value": test2, "label": "test2"}] does nothing in your code.

[Crazralfrill]

Ok I get it from your example. options should be in data (which makes sense…).
Thanks !