Как построить панель поиска, аналогичную Carvana
Мы работаем над проектом класса, в котором мы создаем каталог автомобилей для начинающих покупателей автомобилей (мы новички в веб-разработке). Мы используем Django для бэкенда, PostgreSQL для базы данных и vue.js для фронт-энда. Мы пытаемся сделать панель фильтров, похожую на панель поиска Caravana, и хотели узнать, какой тип компонента мы можем использовать в vuetify, чтобы получить похожий вид. Мы остановились на выпадающих списках, похожих на сайт, но у наших будет только четыре варианта:
- Цена (ползунок диапазона)
- Марка и модель (аналогично carvana)
- Кузов
- стиль (кнопки)
- дверь (ползунок с диапазоном/ступенька)
- сиденья (ползунок диапазона с шагом)
- привод (кнопки)
- Особенности
- Безопасность (ползунок дальности с шагами)
- Топливо (кнопки)
- MPG
- Город (ползунок диапазона)
- Шоссе (ползунок диапазона)
- Лошадиные силы (ползунок диапазона)
- Цилиндр (кнопки)
- Размер двигателя (кнопки)
- Engine loc (кнопки)
Например, выпадающий список Body будет иметь 4 подкомпонента, каждый из которых будет иметь настройки фильтра и так далее.
Полагаю, мы запутались в том, как получить подкомпоненты с их различными кнопками под выпадающим меню, подобно выпадающему меню функций на сайте carvana. Ссылки на любые блоги и учебники или любые советы для начинающих веб-разработчиков были бы очень признательны. Спасибо!
Различные варианты выпадающего списка:
Это самая сложная часть: Как мы можем достичь этого с помощью vue.js?
Carvana, кажется, имеет только кнопочные опции для каждого из своих субкомпонентов, но мы хотим добавить ползунки диапазона для определенных функций.
