Vue2组件模板的某些部分无法呈现

Question

我有一个vue2应用程序（名为＆＃39; renderer-app＆＃39;），其中一个组件作为其子组件（称为＆＃39; section-renderer＆＃39;），后者又有一个子组件。在父组件（section-renderer）中，我有一个模板选项，其中多个组件被添加到父组件：

模板：

<div>
    <component v-for="(item, index) in layoutArray" :is="item.template" :cardObj="item.cardObj" :key="item.id"></component>
    <!--the above component gets rendered as it should, but the rest of the template is not rendered-->
    <div class="parallax-container">
        <div class="parallax">
           <img src="./images/banner2.jpg">
        </div>
        <div class="advertisement-text-box">
            <p class="advertisement-header">some header</p>
            <p class="advertisement-text">some text</p>
        </div>
    </div>
</div>

正如我在注释行中所示，子组件被多次渲染，但是每个父组件应该渲染一次的模板的其余部分都不会呈现。 奇怪的是，如果我在两者之间插入一个带的 div ，模板的其余部分也会渲染。所以这是有效的（当然是一个不需要的线）：

模板：

<div>
    <component v-for="(item, index) in layoutArray" :is="item.template" :cardObj="item.cardObj" :key="item.id"></component>
    <div>extra</div> <!--the extra div with text-->
    <div class="parallax-container">
        <div class="parallax"><img src="./images/banner2.jpg"></div>

        <div class="advertisement-text-box">
            <p class="advertisement-header">some header</p>
            <p class="advertisement-text">some text</p>
        </div>
    </div>
</div>

我尝试了围绕子组件和模板其余部分的div的各种定位，但似乎都没有。任何帮助将不胜感激。