Задать вопрос
@kirill98402
starter fron-end dev

Как сделать древообразное меню, с чек-боксами и отображением соответственных карточек?

Добрый день форумчане! Возникла такая задача: необходимо сделать древообразное меню со списком устройств, возле которых есть чек-боксы. Нужно после выбора пунктов меню "девайсов", при нажатии кнопки "отобразить", отображать соответственные карточки.
На данный момент что имеется:
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
Последний вариант
Пытаюсь запихнуть его к себе в проект, некорректно отображается + не выбираются нажатые пункты, скорее проблема в шрифтах.
То что не понятно: как это всё вместе совместить, куда передавать выбранные данные в меню, чтобы на основании них в другом компоненте формировать соответственные карточки? Может есть у кого-то уже готовые примеры решения подобных задач?
  • Вопрос задан
  • 66 просмотров
Подписаться 1 Средний 6 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы