Реализовать функциональность с помощью стандартных возможностей v-combobox.
Есть такая структура данных объектов:
const items = ref([
{ title: 'Морковь', text: 'Сладкая морковь', tags: ['овощи', 'оранжевый'], id: 1 },
{ title: 'Картофель', text: 'Нежный картофель', tags: ['овощи', 'коричневый'], id: 2 },
{ title: 'Огурец', text: 'Свежий огурец', tags: ['овощи', 'зеленый'], id: 4 },
{ title: 'Помидор', text: 'Сочный помидор', tags: ['овощи', 'красный'], id: 5 },
{ title: 'Кабачок', text: 'Нежный кабачок', tags: ['овощи', 'зеленый'], id: 6 },
{ title: 'Лук', text: 'Пикантный лук', tags: ['овощи', 'белый'], id: 7 },
{ title: 'Перец', text: 'Сладкий перец', tags: ['овощи', 'красный'], id: 8 },
{ title: 'Баклажан', text: 'Нежный баклажан', tags: ['овощи', 'фиолетовый'], id: 9 },
{ title: 'Свекла', text: 'Сладкая свекла', tags: ['овощи', 'красный'], id: 10 },
{ title: 'Капуста', text: 'Свежая капуста', tags: ['овощи', 'зеленый'], id: 11 },
{ title: 'Яблоко', text: 'Сочное яблоко', tags: ['фрукты', 'красный'], id: 12 },
{ title: 'Банан', text: 'Сладкий банан', tags: ['фрукты', 'желтый'], id: 13 },
{ title: 'Апельсин', text: 'Сочный апельсин', tags: ['фрукты', 'оранжевый'], id: 14 },
{ title: 'Груша', text: 'Сладкая груша', tags: ['фрукты', 'зеленый'], id: 15 },
{ title: 'Виноград', text: 'Сладкий виноград', tags: ['фрукты', 'фиолетовый'], id: 16 },
{ title: 'Лимон', text: 'Кислый лимон', tags: ['фрукты', 'желтый'], id: 17 },
{ title: 'Киви', text: 'Нежный киви', tags: ['фрукты', 'коричневый'], id: 18 },
{ title: 'Ананас', text: 'Сладкий ананас', tags: ['фрукты', 'желтый'], id: 19 },
{ title: 'Клубника', text: 'Ароматная клубника', tags: ['фрукты', 'красный'], id: 20 },
{ title: 'Манго', text: 'Экзотическое манго', tags: ['фрукты', 'зеленый'], id: 21 },
{ title: 'Шоколад', text: 'Сладкий шоколад', tags: ['сладости', 'коричневый'], id: 22 },
{ title: 'Зефир', text: 'Воздушный зефир', tags: ['сладости', 'белый'], id: 23 },
{ title: 'Торт', text: 'Сладкий торт', tags: ['сладости', 'белый'], id: 24 },
{ title: 'Леденец', text: 'Сладкий леденец', tags: ['сладости', 'красный'], id: 25 },
{ title: 'Печенье', text: 'Хрустящее печенье', tags: ['сладости', 'золотистый'], id: 26 },
{ title: 'Маршмеллоу', text: 'Нежный маршмеллоу', tags: ['сладости', 'розовый'], id: 27 },
{ title: 'Вафли', text: 'Хрустящие вафли', tags: ['сладости', 'бежевый'], id: 28 },
{ title: 'Карамель', text: 'Сладкая карамель', tags: ['сладости', 'янтарный'], id: 29 },
{ title: 'Пастила', text: 'Сладкая пастила', tags: ['сладости', 'белый'], id: 30 },
{ title: 'Пряник', text: 'Ароматный пряник', tags: ['сладости', 'коричневый'], id: 31 },
{ title: 'Креветки', text: 'Сочные креветки', tags: ['морепродукты', 'розовый'], id: 32 },
{ title: 'Мидии', text: 'Сочные мидии', tags: ['морепродукты', 'черный'], id: 33 },
{ title: 'Кальмары', text: 'Сочные кальмары', tags: ['морепродукты', 'белый'], id: 34 },
{ title: 'Лобстер', text: 'Сочный лобстер', tags: ['морепродукты', 'красный'], id: 35 },
{ title: 'Гребешки', text: 'Сочные гребешки', tags: ['морепродукты', 'белый'], id: 36 },
{ title: 'Краб', text: 'Сочный краб', tags: ['морепродукты', 'красный'], id: 37 },
{ title: 'Лосось', text: 'Нежный лосось', tags: ['морепродукты', 'оранжевый'], id: 38 },
{ title: 'Тунец', text: 'Нежный тунец', tags: ['морепродукты', 'розовый'], id: 39 },
{ title: 'Скумбрия', text: 'Сочная скумбрия', tags: ['морепродукты', 'серебристый'], id: 40 },
{ title: 'Сельдь', text: 'Соленая сельдь', tags: ['морепродукты', 'серый'], id: 41 }
]);
Есть такая структура данных для списка с фильтрами:
filtersMenu: ['овощи', 'фрукты', 'сладости', 'морепродукты'],
Необходимо сделать пример кода с оригинальным v-combobox из vuetify 3 библиотеки с такой функциональностью:
1) искать по ключам по всем трем свойствам (filter-keys="title, text, tags");
2) в выпадающем списке объектов отображать пропс text;
3) в выпадающем списке объектов должна работать подсветка (подсвечивать совпадения в text);
4) при выборе объекта, в input поле добавлять пропс title;
5) при выборе айтема из filtersMenu, добавлять его в input и обновлять меню с подходящими объектами;
Обратите внимание:
- реализовать нужно стандартными возможностями v-combobox (без комбинаций с разных компонентов);
- поисковая функция должна искать по всем трем пропсам (title, text, tags) независимо от регистра;
- подсветка должна работать
- выпадающий список должен активироваться, когда добавлен айтем из filtersMenu (предыдущее значение можно заменять)
