VueJS покинул список меню, который обновляет панель основного контента

Question

У меня есть приложение VueJS, в котором мне нужно создать компонент, который будет иметь левое меню и основное содержимое, как на следующем изображении:

После загрузки вида на create method я загрузлю left menu json и items content json.К этому времени ни один элемент не будет отображаться в основном контенте.

Как только пользователь выберет элемент из левого меню, json для содержимого элементов будет отфильтровано, так что основной компонентвизуализирует квадраты (каждый компонент элемента, который на самом деле является отдельным компонентом).

Мой вопрос здесь о том, сколько компонентов я должен построить?

Я думаю, мне придется создать контейнер компонента, который будетудерживайте left menu component и right component.Тогда правый компонент будет иметь заголовок и элемент v-for, который будет отображать каждый из item component.Это путь?

Любой совет?

Answer 1

Вы можете создать один компонент контейнера, который размещает все три области, используя CSS grid .Тогда вы можете иметь компонент для каждой области: левое меню, заголовок и основное содержимое.

Есть некоторая кривая обучения с разметкой сетки, но это очень полезно,Современные браузеры поддерживают его , но не IE.

new Vue({
  el: '#app',
  components: {
    leftMenu: {
      template: '#left-menu-template'
    },
    mainContent: {
      template: '#main-content-template'
    },
    headerThing: {
      template: '<div class="header-thing"><div>one</div><div>two</div></div>'
    }
  }

});

html,
body {
  height: 100%;
}

#app {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'lm h'
    'lm mc'
  ;
  width: 100%;
  height: 100%;
}

.header-thing {
  background-color: #eef;
  grid-area: h;
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  padding: 0.7em;
  grid-gap: 1.4em;
}

.left-menu {
  background-color: #efe;
  grid-area: lm;
  padding: 0.7em;
}

.main-content {
  background-color: #fee;
  grid-area: mc;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
  grid-auto-rows: 1fr;
}

.content-item {
  background-color: white;
  border: thin solid black;
  border-radius: 0.2em;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 2em 3em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <header-thing></header-thing>
  <left-menu></left-menu>
  <main-content></main-content>
</div>

<template id="left-menu-template">
  <nav class="left-menu">
    <div>First item</div>
    <div>Second item</div>
  </nav>
</template>

<template id="main-content-template">
  <div class="main-content">
    <div class="content-item">item</div>
    <div class="content-item">another</div>
    <div class="content-item">another</div>
    <div class="content-item">more</div>
    <div class="content-item">still more</div>
    <div class="content-item">another</div>
  </div>
</template>