Добрый день форумчане! Возникла такая задача: необходимо сделать древообразное меню со списком устройств, возле которых есть чек-боксы. Нужно после выбора пунктов меню "девайсов", при нажатии кнопки "отобразить", отображать соответственные карточки.
На данный момент что имеется:
1)Вывод карточек, с помощью загрузки информации из БД через Rest запрос:
<div class="container pa-0 grid-list-xl fluid" >
<div class="layout wrap ">
<div class="flex xs12 sm4 md3 d-flex" id="cards" v-for="currency in currencies" :key="currency.id">
<card class="card" :id="currency.id" :name="currency.name" :location="currency.enterprise.location" :napruga="currency.napruga"></card>
</div>
</div>
</div>
data () {
return {
currencies: {}
}
},
created() {
axios({
method: 'get',
url: 'http://localhost:8080/app/rest/v2/entities/energyview_Device?view=device-with-enterprise',
headers: {
'Authorization': 'Bearer f4d1a543-7b5c-4d63-ab7c-48923c10ab2c',
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(response => {
this.currencies = response.data;
console.log(this.currencies[0].body);
}).catch(error => {
console.error(error.message);
});
}
}
2) На vuetify есть интересный компонент для реализации такого рода - меню:
https://vuetifyjs.com/ru/components/treeview
Последний вариант
Пытаюсь запихнуть его к себе в проект, некорректно отображается + не выбираются нажатые пункты, скорее проблема в шрифтах.
То что не понятно: как это всё вместе совместить, куда передавать выбранные данные в меню, чтобы на основании них в другом компоненте формировать соответственные карточки? Может есть у кого-то уже готовые примеры решения подобных задач?
