VueJS: Порядок исправлений компонентов в Bootstrap

Question

У меня недавно возникли проблемы с заказом Vue компонентов в Bootstrap. Я пытаюсь создать некоторый Bootstrap сворачиваемый контент в Vue, вот код:

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 кнопке. который сворачивает и разворачивает содержимое.

Текущий результат

Required Result

Требуемый результат

Можно ли создать компонент так, чтобы содержимое раздела всегда находилось под кнопкой раздела.

Заранее спасибо.

Answer 1

Думаю, у вас есть два варианта для этого:

1. Создать новый компонент, который принимает элементы и отображает оба компонента, как вы sh.
2. Не повторять над компонентами, вместо этого используйте <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>