Q-list on sidebar to display clicked content on main page (body)

[keechan]

I am using a q-drawer to display a menu list (using q-list and q-items).
Each item when clicked should render a new vue component on the body part of my page.

However, this is not the case. Clicking on the menu item renders the new vue component on the sidebar (drawer) as well.

How can I make it load on the body/main area instead of the sidebar?

      <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>

Help!

[tof06]

Hi @keechan,
Why not using vue-router and the to property of q-item ?