Компонент боковой панели для отображения на главной странице (тело) - PullRequest
Новая
       21

Компонент боковой панели для отображения на главной странице (тело)

0 голосов
/ 13 апреля 2020

Я использую Quasar's q-drawer для отображения списка меню (используя q-list и q-items). Каждый элемент при нажатии должен отображать новый компонент vue на части тела моей страницы.

Однако это не так. При нажатии на элемент меню также отображается новый компонент vue на боковой панели (выдвижном ящике).

Как сделать так, чтобы он загружался в основной / основной области вместо боковой панели?

Фрагмент кода моего компонента (LeftSideBar): 

      <q-list v-for="(menuItem, index) in menuList" :key="index" align="left">
        <q-item clickable v-ripple @click="selected = menuItem.label" active-class="button-highlighted"
      :active="selected === menuItem.label" >

          <q-item-section>
            {{ menuItem.label }}
          </q-item-section>
        </q-item>

      </q-list>

<div v-if="selected == 'Some Text'">
     <SomeNewVue />
</div>

И он находится на моей главной странице макета. 

    <q-page-container>
      <q-drawer bordered v-model="isShowLeftDrawer" :width="320" :breakpoint="100" content-class="bg-blue text-white">
        <LeftSidebar/>
      </q-drawer>

      <router-view />
    </q-page-container>

Как видите, LeftSidebar находится в q-page-container. Можно ли как-то отобразить новый компонент vue на главной странице, не используя реквизиты / события ??

Помогите, пожалуйста! Заранее спасибо!

1 Ответ

0 голосов
/ 13 апреля 2020

Вам необходимо поместить код компонента в q-page-container. Он будет отображаться в области тела.

например. 

<q-page-container>
  <router-view/>
  <div v-if="selected == 'Some Text'">
     <SomeNewVue />
  </div>
</q-page-container>

см. Это - https://codepen.io/Pratik__007/pen/YzyXJYb?editable=true&editors=101%3Dhttps%3A%2F%2Fquasar.dev%2Flayout%2Fdrawer

...