Добавить другого дочернего элемента на основе условия в динамический компонент Vue? - PullRequest
Новая
       22

Добавить другого дочернего элемента на основе условия в динамический компонент Vue?

0 голосов
/ 11 марта 2019

Я использую Vuetify's navigation drawer.Структура навигации исходит из магазина Vuex.

Идея состоит в том, чтобы сохранить структуру навигации в объекте и построить навигацию оттуда, поэтому я решил использовать динамический компонент <component :is="componentName"/>.

* 1006.* У меня есть 2 компонента, им нужны разные дочерние элементы, поэтому я попытался сказать dynamic component, чтобы установить правильное значение child на основе текущего компонента. 
<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>

Это то, что я получил: 

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

Что я делаю не так?

1 Ответ

0 голосов
/ 11 марта 2019

Вы должны переместить ваш защищенный код v-if в компоненты vListGroup и vListTile и передать информацию (item.title, item.submenus, submenu.title и т. Д.) В качестве подпорки к ним.

Смысл использования :is заключается в том, чтобы не использовать v-if для визуализации компонентов, а полагаться на props для передачи информации.

Альтернативой может быть полное отказ от <component :is и использованиеv-if непосредственно внутри цикла и, опять же, передать информацию через props.

...