CODEWITHSUNDEEP
vue.jsbootstrap-vue
llhilton
llhilton

Reputation: 190

How do I collapse/expand multiple dynamic collapses from parent component with Bootstrap-Vue?

In the parent component, I have the following:

<b-col cols="2">
    <b-btn v-b-toggle.collapse0.collapse1 variant="secondary" size="sm"><i class="fas fa-bars"></i></b-btn>
</b-col>

"collapse0" and "collapse1" are currently hard-coded ids from the collapses I'm generating dynamically in the child component like so:

<b-collapse :id="'collapse' + index" class="mt-2">

Each of these have their own collapse/expand button like so: 

<b-btn v-b-toggle="'collapse' + index" variant="secondary" size="sm"><i class="fas fa-bars"></i></b-btn>

I don't see any documented way to accomplish the expand/collapse multiple dynamically. I've fiddled around with v-b-toggle="[collapse0, collapse1]" and other variants but haven't stumbled on a way to accomplish this.

I also tried having the parent button just update a data variable, which I send as a prop to the child component. That approach seemed to get me a little further, except that in that case, as I understand it, I have to do v-model="{some data variable here}" to change the collapse state. So I can get the prop, set the variable to it initially, and that works initially but doesn't react to the change on the prop without a watcher, which seemed unnecessarily complicated to me. I'm also not sure how this approach would interact with the toggle buttons on the individual collapses, nor how that should communicate with the parent buttons.

I have looked over this solution, but I haven't been able to figure out how to implement it, especially since I don't have the child component declared in the parents' "compoment" object.

So, part one of the question here would be -- is there a way to pass multiple collapse ids to the v-b-toggle element dynamically?

If not, is there a way to implement the refs solution without the components object being filled?

And, failing those three, does anybody have an example of a way they did this successfully using a parent variable/child prop/child variable type of scenario?

Thanks in advance!

Upvotes: 1

Views: 2737

Answers (2)

gio_klimt
gio_klimt

Reputation: 1

The solution is

v-b-toggle:[dynamicAttribute]

Upvotes: 0

Nehio
Nehio

Reputation: 31

i had the same issue and the way i did it was to put a dynamic ref on the b-collapse :

v-for="(period,index) in periods" and :ref="'period'+index" on each b-collapse element (generated dynamically)

and then acces the show variable of the component :

        OpenAllCollapse() {
            for (var i = 0; i < this.periods.length; i++) {
                this.$refs["period" + i][0].$data.show = true
            }
        }

Upvotes: 1

Related Questions