0

I'm using Vuetify's navigation drawer. The navigation structure is coming from a Vuex store.

The idea is to store the navigation structure into an object and build the navigation from there, so I choose to use dynamic component <component :is="componentName"/>.

I have 2 components, they need different childs, so what I have tried was to tell the dynamic component to set the right child based on the current component.

<template>
  <v-navigation-drawer
    app
    stateless
    value="true"
  >
    <v-list>
      <component
        v-for="(item, i) in $store.state.leftMenu.structure"
        :key="i"
        :is="item.submenus ? 'vListGroup' : 'vListTile'"
        :prepend-icon="item.icon"
      >
        <template v-if="item.submenus">
          <template v-slot:activator>
            <v-list-tile>
              <v-list-tile-title v-text="item.title"/>
            </v-list-tile>
          </template>

          <v-list-group
            v-for="(submenu, i) in item.submenus"
            :key="i"
            no-action
            sub-group
          >
            <template v-slot:activator>
              <v-list-tile>
                <v-list-tile-title v-text="submenu.title"/>
              </v-list-tile>
            </template>

            <v-list-tile
              v-for="(submenuChild, i) in submenu.childs"
              :key="i">
              <v-list-tile-title v-text="submenuChild.title"/>
              <v-list-tile-action>
                <v-icon v-text="submenuChild.icon"/>
              </v-list-tile-action>
            </v-list-tile>
          </v-list-group>
        </template>
        <template v-else>
          <v-list-tile-action>
            <v-icon v-text="item.icon"/>
          </v-list-tile-action>
          <v-list-tile-title v-text="item.title"/>
        </template>
      </component>
    </v-list>
  </v-navigation-drawer>
</template>

This is what I got:

Errors compiling template: <template v-slot> can only appear at the root level inside the receiving the component
<template v-if="item.submenus">
 <template v-slot:activator>
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^
     <v-list-tile>
       ^^^^^^^^^^^^^^^^^^^^^^^
         <v-list-tile-title v-text="item.title"/>

What I'm doing wrong?

Eleandro Duzentos
  • 1,370
  • 18
  • 36

1 Answers1

0

You should move your guarded v-if code inside the vListGroup and vListTile components and pass the information (item.title, item.submenus, submenu.title, etc) as props to them.

The hole point of using :is is to not use v-if to render components, but rely on props to pass the information.

An alternative would be to ditch <component :is completely and use v-if directly inside the loop and, again, pass the information via props.

Radu Diță
  • 13,476
  • 2
  • 30
  • 34