Javascript VueJS:修复引导中的组件顺序

我最近在引导中的Vue组件顺序方面遇到了一些问题。我正在尝试在Vue中生成一些引导可折叠内容，以下是迄今为止的代码：

HTML

VueJS

Vue.component（“主节按钮”{
道具：[“部分”]，
模板：String.raw`{section.text}}`
});
Vue.组件（“主要部分”{
道具：[“部分”]，
模板：String.raw`你好，世界！
`
});
让应用程序=新Vue({
el:'主要内容'，
数据：{
章节：[
{id:0，文本：“example1”}，
{id:0，文本：“example2”}
]
}
});

我曾尝试只为

主节

和

主节按钮

制作一个组件，但由于需要将

id

传递给卡（可折叠内容），并将

数据目标

传递给可折叠和扩展内容的按钮，因此没有成功

当前结果

要求的结果

是否可以创建一个组件，以便节内容始终位于节按钮下方

---

提前感谢您。

我想您有两种选择来实现这一点：

创建一个新组件，该组件接受这些项目并根据需要显示这两个组件

不要迭代组件，而是在两个组件周围使用

，或者像这样使用未渲染的

：

<div class="col-sm main-content" id="main-content">
    <template v-for="item in sections">
        <p>
            <main-section-button 
                v-bind:section="item"
                v-bind:data-target="'#section-' + item.text"
                v-bind:aria-controls="'section-' + item.text">
            </main-section-button>
        </p>
        <main-section
            v-bind:id="'section-' + item.text">
        </main-section>
    </template>
</div>