Рендеринг одного и того же компонента внутри себя - PullRequest
Новая
       14

Рендеринг одного и того же компонента внутри себя

0 голосов
/ 23 мая 2018

В моем главном компоненте App шаблон настроен следующим образом: 

 <div v-if="authenticated" id="app">
    <template v-if="user && metadata">
      <registration v-if="user.user_type.match(/patient/i) && !metadata.registration_complete"/>
      <template v-else>
      ...
      </template>
    </template>
 </div>

, а шаблон компонента Registration выглядит следующим образом: 

<template>
  <div class="patient-registration">
    <div class="container">
      <router-view/>
    </div>
  </div>
</template>

Я хочу *Компонент 1009 * для рендеринга его дочерних маршрутов, поэтому я настроил маршруты следующим образом: 

{
  path: '/registration',
  // name: 'Registration',
  component: Registration,
  children: [
    {
      path: '',
      name: 'Agreements',
      component: Agreements
    }, {
      path: 'information',
      name: 'PersonalInfo',
      component: PersonalInfo
    }
  ]
},

Но выходной html визуализирует Регистрацию внутри себя перед тем, как отобразить его дочерний Agreement следующим образом: 

<div data-v-6062c645="" class="patient-registration">
    <div data-v-6062c645="" class="container">
        <div data-v-6062c645="" class="patient-registration">
            <div data-v-6062c645="" class="container">
                <div data-v-0bd02235="" data-v-6062c645="" class="agreements">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

Я использую этот тип шаблона в другом месте, и он работает, как ожидалось.Я не уверен, почему в этом случае Registration компонент визуализируется внутри себя один раз, прежде чем рендерить его дочерние элементы.Как бы мне заставить его рендериться так? 

<div data-v-6062c645="" class="patient-registration">
    <div data-v-6062c645="" class="container">
        <div data-v-0bd02235="" data-v-6062c645="" class="agreements">
           ...
        </div>
    </div>
</div>
...