Why are options not displayed and QSelect is "loading"?

Question

I am trying to display a Quasar QSelect component that will get its entries from an API (that returns choices dependent of what is typed in the box):

<template>
  <q-select
    v-model="selectedUsers"
    :options="filteredUsers"
    label="assigned to"
    outlined
    input-debounce="0"
    multiple
    style="width: 250px"
    use-chips
    use-input
    @filter="filterUsers"
    new-value-mode="add-unique"
  />
</template>

<script lang="ts">
export default {
  name: 'UserChoice',
}
</script>

<script lang="ts" setup>
import { callApi, User } from 'components/helpers'
import { ref } from 'vue'

const selectedUsers = ref<Array<User>>([])
const filteredUsers = ref<Array<User>>([])

const filterUsers = (user: string) => {
  callApi({endpoint: `/user/${user}`, method: 'GET'}).
  then(r => {
    console.log(user, r)
    let users: Array<User> = r.Data as Array<User>
    filteredUsers.value = users.map(x => {return {label: x.UserName, value: x}})
  }).
    catch(() => {{}})
}
</script>

<style scoped>

</style>

callAPI makes a fetch call to the API and returns json().

When typing in the box I see

The round spinner is spinning and no dropdown with choices is displayed despite filteredUsers having the right content: an Array of Objects such as

{
  label: "John Gremmet",
  value: { <an object with some information }
}

(I wrote above something that would be successfully filtered against have emm in the API - I am checking the content of filteredUsers in the Vue extension of DevTools)

My question: why isn't QSelect using the filteredUsersvalues and spinning (as if it was "loading" something?)

Answer 1

The solution seems to be the specific update function that was missing:

const filterUsers = (user: string, update: (args: Promise<void>) => void, abort: () => void) => {
  update(callApi({endpoint: `/user/${user}`, method: 'GET'}).
  then(r => {
    console.log(user, r)
    let users: Array<User> = r.Data as Array<User>
    filteredUsers.value = users.map(x => {return {label: x.UserName, value: x}})
  }).
  catch(() => {{}}))
}