Problem with v-autocomplete with chips - Vuetify

Question

I have been trying to use the v-autocomplete with chips and unfortunately, I'm having a problem rendering the chips. When we use the search-input property with .sync, to be able to do a search directly in the API, when selecting the item in the listing, the selected chip simply does not appear.

A workaround for this I found is to use the cached-items property, but it always caches the items retrieved from the API.

Has anyone had a problem similar to this one?

https://codepen.io/leonardoabreu/pen/ExbovOZ

Vuetify version: 2.5.6

Code:

<template>
  <v-autocomplete
    v-model="myModel"
    :items="searchResults"
    :search-input.sync="searchTerms"
    return-object
    class="user-search"
    append-icon="mdi-magnify"
    background-color="white"
    item-text="email"
    item-value="email"
    chips
    deletable-chips
    filled
    hide-no-data
    hide-selected
    outlined
    persistent-placeholder
    @keydown.esc="onEscPressed"
    @keydown.enter="onInputChanged"
    @input.native="onInputChanged"
    @change="resetSearchTerms"
    v-on="$listeners"
  >
    <template #selection="{ item, attrs, selected, select }">
      <v-chip
        v-bind="attrs"
        :input-value="selected"
        close
        @click="select"
        @click:close="$emit('onRemoveResult', item.email)"
      >
        {{ item.email }}
      </v-chip>
    </template>

    <template #item="{ item }">
      <v-list-item-content v-text="item.email" />
    </template>
  </v-autocomplete>
</template>

export default {
  name: 'MySearch',
  data: () => ({
    myModel: [],
    loading: false,
    searchResults: [],
    searchTerms: '',
  }),
  computed: {
    filters() {
      return { name: this.searchTerms?.trim() || '' };
    },
  },
  methods: {
    searchUsers() {
      if (this.searchTerms?.length < 3) {
        this.searchResults = [];
        return;
      }

      this.loading = true;

      this.searchResults = [
        { name: "First Name", email: "first@foo.com" },
        { name: "Second Name", email: "second@foo.com" },
      ]

      this.loading = false;
    },
    onInputChanged() {
      if (!this.searchTerms || this.searchTerms?.length < 3) {
        this.searchResults = [];
        return;
      }

      this.searchUsers();
    },
    onEscPressed() {
      this.resetSearchTerms();
    },
    resetSearchTerms() {
      this.searchTerms = '';
      this.searchResults = [];
    },
  },
};

Answer 1

If I understood it correctly, your problem is that the cached items are listed after you select one of the items in the list, but you want them to not show, right?

Assuming that's the case, a workaround you can use here is to replace the v-autocomplete cachedItems data value for its lazyValue on the change event.

To do that, you'll need to add a ref prop to you v-autocomplete:

  <v-autocomplete
    ref="search-autocomplete"
    ...

Then, in your change event method, replace the cachedItems for the lazyValue (value doesn't work here because by the time the change event triggers, value still hasn't been computed):

this.$refs['search-autocomplete'].cachedItems = this.$refs['search-autocomplete'].lazyValue;