I'm at a loss here as to why this is happening.

When I type into the autocomplete input, my data gets fetched via axios fine, it populates "searchResults", but the results do not display until the input is cleared.

Autocomplete:

<v-slide-x-transition>
  <v-autocomplete
    :items="searchResults"
    :loading="isSearching"
    :search-input.sync="search"
    color="primary"
    hide-no-data
    hide-selected
    item-text="Description"
    item-value="API"
    label="Search"
    placeholder="Start typing to Search"
    prepend-icon="mdi-database-search"
    return-object
    
    v-if="searchBox"
  >
    <template v-slot:item="data">
      <v-list-item-avatar>
        <v-icon>
          mdi-account
        </v-icon>
      </v-list-item-avatar>
      <v-list-item-content>
        <v-list-item-title v-html="data.item.first_name"></v-list-item-title>
        <v-list-item-subtitle v-html="data.item.last_name"></v-list-item-subtitle>
      </v-list-item-content>
    </template>
  </v-autocomplete>
</v-slide-x-transition>

Code:

export default {
  name: 'navBar',
  data: () => ({
    searchBox: true,
    search: null,
    select: null,
    searchResults: [],
    isSearching: false,
  }),
  watch: {
    search(val) {
      this.querySelections(val);
    },
  },
  methods: {
    showSearch() {
      this.searchBox = true;
    },
    hideSearch() {
      this.searchBox = false;
      this.search = null;
      this.searchResults = [];
    },
    async querySelections() {
      this.isSearching = true;
      const res = await this.callApi('get', '/app/search?query='   this.search);
      if (!res.data) {
        this.searchResults = [];
      } else {
        this.searchResults = res.data;
      }
      console.log(this.searchResults);
      this.isSearching = false;
    }
  },
  mounted() {
  }
}

Json:

[
   {
      "id":1,
      "first_name":"Nigel",
      "last_name":"Brian",
      "email":"[email protected]",
      "email_verified_at":"2021-12-02T00:00:00.000000Z",
      "super_admin":1,
      "profile_photo":"1642002293.jpg",
      "created_at":null,
      "updated_at":"2022-01-12T15:53:41.000000Z",
      "deleted_at":null,
      "permissions_for_vue":"{\"users_add\":true,\"users_view\":true,\"users_edit\":true,\"users_delete\":true,\"users_permissions\":true}",
      "permissions_alt":{
         "users_add":true,
         "users_view":true,
         "users_edit":true,
         "users_delete":true,
         "users_permissions":true
      }
   },
   {
      "id":2,
      "first_name":"Jane",
      "last_name":"Parker",
      "email":"[email protected]",
      "email_verified_at":"2021-12-02T00:00:00.000000Z",
      "super_admin":0,
      "profile_photo":"1641313913.jpg",
      "created_at":null,
      "updated_at":"2022-01-12T14:18:29.000000Z",
      "deleted_at":null,
      "permissions_for_vue":"{\"users_permissions\":true,\"users_add\":true,\"users_view\":true,\"users_edit\":true,\"users_delete\":true}",
      "permissions_alt":{
         "users_permissions":true,
         "users_add":true,
         "users_view":true,
         "users_edit":true,
         "users_delete":true
      }
   },
   {
      "id":5,
      "first_name":"Nick",
      "last_name":"Walters",
      "email":"[email protected]",
      "email_verified_at":"2021-12-02T00:00:00.000000Z",
      "super_admin":0,
      "profile_photo":null,
      "created_at":null,
      "updated_at":"2022-01-12T15:27:22.000000Z",
      "deleted_at":null,
      "permissions_for_vue":"{\"users_permissions\":true,\"users_add\":true,\"users_view\":true,\"users_delete\":true,\"users_edit\":true}",
      "permissions_alt":{
         "users_permissions":true,
         "users_add":true,
         "users_view":true,
         "users_delete":true,
         "users_edit":true
      }
   },
   {
      "id":16,
      "first_name":"Billy",
      "last_name":"Brag",
      "email":"[email protected]",
      "email_verified_at":null,
      "super_admin":1,
      "profile_photo":null,
      "created_at":"2022-01-12T15:34:02.000000Z",
      "updated_at":"2022-01-12T15:43:17.000000Z",
      "deleted_at":null,
      "permissions_for_vue":"[]",
      "permissions_alt":[
         
      ]
   }
]

Is there something obvious I'm missing here? Thanks for reading!

CodePudding user response：

As I pointed out earlier in the comment, the problem is in item-value and item-text properties.

There are no Description and API fields in your JSON data, but these fields are specified in the template.

According to docs, these fields can contain string, array or function.

So you may change it to string value with name of field that should exist in your JSON:

...
item-text="first_name"
item-value="id"
...

or create a method with function that will return some combined value:

...
:item-text="getFullName"
item-value="id"
...
methods: {
  ...
  getFullName(item) {
    return [item.first_name, item.last_name].join(' ')
  }
}

You may check this solution with static data at CodePen.