Может ли Vuetify autocomplete иметь два массива?

Question

Есть два пустых массива данных: фрукты и животные. Когда пользователь нажимает v-autocomplete, строка поиска покажет данные фруктов ["apple","banana","kiwi"] в виде списка. Когда пользователь вводит что-то, данные о фруктах исчезают и вместо этого отображаются данные о животных из API. Таким образом, в основном есть два массива данных, но я могу добавить только один элемент в автозаполнение Vuetify.

 <v-autocomplete 
  v-model="select" 
:items="fruits" 
:search-input.sync="search">

Так есть ли способ изменить массив элементов после того, как пользователь что-то введет в поле ввода?

Answer 1

Вы можете объединить массив фруктов с результатами поиска из вашего API.

Допустим, у вас есть массив с именем items, который будет содержать все результаты, и массив с именем fruit только для фрукты. Затем, когда ваш компонент создан, вы можете добавить все в fruit к items, например, this.items = [...this.fruit].

Затем, когда вы выполните поиск и получите результаты обратно и поместите их в массив с именем results, вы можете установить items, чтобы он содержал все в results плюс все в fruit, например,

this.items = [...this.fruit, ...this.results]

Кажется, Vuetify все еще применяет свою собственную функцию поиска после того, как вы возвращаете результаты поиска, так что будет по-прежнему отфильтровывать fruit, которые не соответствуют вашему поисковому запросу.

Вы можете посмотреть демонстрацию, которую я сделал на Codepen здесь .