Реализация вложенного списка на VueJS — NuxtJS?

Question

[Fr Zond]

Уважаемые эксперты, появился следующий вопрос (использую Vue и Nuxt), есть вложенный список такого вида:

То есть при нажатии на одну из кнопок меню подставляются соответственные блоки, я представляю как это реализовать, но считаю что это костыль, то есть мы получаем все пункты меню, проверяем есть ли у них класс active, убираем у всех, заново присваиваем таргету, и так же получаем кнопку по таргету и вызываем нужные блоки, скрывая остальные.
Но возможно есть более качественный способ решения(без кучи удалений и добавлений классов в ручную, например как class-active при использовании роутов) или или какой то тег о котором я просто не знаю?
Заранее спасибо

Answer 1

[Георгий Бухаров]

<template>
<div>
<Menu>
  <MenuItem v-for="item in items" @click="activeItem = item.name" :key="item.name"/>
</Menu>
<List>
  <ListItem v-for="item in items" v-if="activeItem === item.name" :key="item.name">
    <keep-alive> <!-- опционально -->
     <component :is="item.component" />
    </keep-alive>
  </ListItem>
</List>
</div>
</template>

<script>

export default {
components: {
  ComponentName: () => import('@/components/ComponentName'), //dynamic import + built in prefetch
  // other components
}
data: () => ({
    activeItem: 'livingBuildings',
    items: [
     {
       name: 'livingBuildings',
       component: '', // имя компонента
     },
    ]
  }),
}

</script>