Keep selected options in Vuetify multiple autocomplete with options from the database

user_1193304 0
Viewed 109

I'm trying to use Vuetify's Autocomplete component to select a list of users from the database, searching by name. I want to allow selecting multiple users, with each user appearing as another chip in the autocomplete's input field.

It works fine for the first user selected, but then if I start to type the name of another user, when the search results are updated in the autocomplete component, if the first selected user was not included in the new search results, that user disappears from selected chips.

Here's an example of what happens:

enter image description here

Is there a way to maintain the selected options even if they are no longer included in the search results from the database?

vuetify.js autocomplete
1 Answers

So I found what I feel is an acceptable solution, though I'd love to know if there's a better one.

Basically instead of just overwriting the user search results with what I get from the database via api, I first append the selected results to the new search results. Something like this:

axios.get('/api/users/' + this.search)
  .then(res => {
    this.user.parents.forEach((id) => res.data.push(this.getSearchResultById(id)));
    this.parentOptions = res.data;
  });


getSearchResultById(id) {
  return this.parentOptions.find((parent) => parent.id === id);
},
user_11933040
Related