v-autocomplete: not displaying text &only using one letter as search-input

Question

My problem is in a Vue 2 application (migration to Vue 3 is pending, need Vue 2 at this time), that is built with Vuetify components.

Versions: "vue": "^2.6.11", "vuetify": "^2.6.0"

What I want to do: I need to fetch addresses from an api in a v-autocomplete component.

This is the relevant part of the template:

<template>
<v-autocomplete
    v-model="adresse"
    :search-input.sync="search"
    :items="katItemsAdr"
    cache-items                        
    color="secondary"
    label="Von-Adresse"
    no-filter
    item-id="id"
    :item-text="(row) => {return row.name1 +' '+ row.name2;}"
    return-object
    outlined
></v-autocomplete>
</template>

And this is the script:

export default {
data: () => ({
    adresse: null,
    katItemsAdr: [],
    search: null,
}),
watch: {
    search (val) {
      const katApiAdr = `${this.$apiBaseURL}/general/address/${val}`;
      val && val !== this.adresse && this.fetchAdrDebounced(katApiAdr);
    },
},
methods: {
    fetchAdrDebounced(url) {
      // cancel pending call
      clearTimeout(this._timerId)

      // delay new call 500ms
      this._timerId = setTimeout(() => {
        this.$axios
          .get(url)
          .then((katRes) => {
            if (katRes.status === 200) {
              katRes.data.map((i) => {
                this.katItemsAdr.push(i);
              });
              console.log(url);
            }
          })
          .catch((error) =>
            console.error(`error msg katApiAdr: ${error}`)
          );
      }, 500)
     },
}
}

The HTTP request takes the search value from my input as a parameter to search the databse for the right address.

However two things happen that I do not want to happen:

1. The input that I type into the autocomplete field is NOT visible. You just can't see anything appearing there. I want it to be visible.
2. My input is registered though because the api request IS made. But only ever with one single letter. I want the input to be used as one string as in my example:

Let's say I put in 'boul' to search for some boulevard, it would delay for 500ms and then only look for the letter 'l' instead of 'boul'. The items (katItemsAdr) are then populated by whatever the api finds with 'l' as the parameter. The url for the fetch looks like this with the one letter as val: http://localhost:8080/api/rest/intern/general/address/l. However I want it to be http://localhost:8080/api/rest/intern/general/address/boul.

What am I doing wrong?

Answer 1

My colleague figured it out with v-autocomplete: katItemsAdr (the value of the items-prop in v-autocomplete) needs to be a computed property.