VueJS：在 Bootstrap 中修复组件顺序答案

【问题标题】：VueJS: Fixing component order in BootstrapVueJS：在 Bootstrap 中修复组件顺序
【发布时间】：2020-11-22 09:39:59
【问题描述】：

我最近在 Bootstrap 中的 Vue 组件顺序方面遇到了一些麻烦。我正在尝试在 Vue 中生成一些 Bootstrap 可折叠内容，这是到目前为止的代码：

HTML

<div class="col-sm main-content" id="main-content">
    <p>
        <main-section-button v-for="item in sections"
                             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-for="item in sections"
                  v-bind:id="'section-' + item.text">
    </main-section>
</div>

VueJS

Vue.component("main-section-button", {
    props: ["section"],
    template: String.raw`<button class="btn btn-block btn-dark" type="button" data-toggle="collapse" aria-expanded="false">{{ section.text }}</button>`
});

Vue.component("main-section", {
    props: ["section"],
    template: String.raw`<div class="collapse"><div class="card card-body"><p>Hello, World!</p></div></div></div>`
});


let app = new Vue({
    el: '#main-content',
    data: {
        sections: [
            { id: 0, text: "example1"},
            { id: 0, text: "example2"}
        ]
    }
});

我尝试只为main-section 和main-section-button 制作一个组件，但这不起作用，因为需要将id 传递给卡片（可折叠内容），并将data-target 传递给卡片折叠和展开内容的按钮。

当前结果

要求的结果

是否可以创建一个组件，使部分内容始终位于部分按钮下方。

提前谢谢你。

【问题讨论】：

标签： javascript html vue.js bootstrap-4

【解决方案1】：

我猜你有两种选择来实现这一点：

创建一个新组件，用于获取项目并根据需要显示这两个组件。
不要迭代组件，而是在两个组件周围使用 <div> 或像这样使用未渲染的 <template>：

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

【讨论】：