CODEWITHSUNDEEP
javascripthtmlvue.jsbootstrap-4
SimpleBinary
SimpleBinary

Reputation: 2078

VueJS: Fixing component order in Bootstrap

I've been having some trouble recently with the order of Vue components in Bootstrap. I'm trying to generate some Bootstrap collapsible content in Vue here's the code so far:

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"}
        ]
    }
});

I have tried to make just one component for main-section and main-section-button, but that did not work because of the requirement to pass an id to the card (collapsible content), and a data-target to the button that collapses and expands the content.

Current Result

Current Result

Required Result

Required Result

Is it possible to create a component so that the section content is always below the section button.

Thank you in advance.

Upvotes: 0

Views: 96

Answers (1)

Tommy
Tommy

Reputation: 2453

I guess you have two options to achieve this:

  1. Create a new component that takes the items and displays both components as you wish.
  2. Do not iterate over the components, instead use a <div> around both components or a non-rendered <template> like this:
<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>

Upvotes: 1

Related Questions