Is it possible to make a bootstrap vue prop dynamic?

Question

I'm trying to create multiple accordions, based on the number of elements received, using bootstrap vue components.

I've created an accordion, similar to how the docs suggest: https://bootstrap-vue.org/docs/components/collapse#accordion-support

Now, I only want clicking on one element to open that accordion. I have given a dynamic id (the index from the parent v-for element) using v-bind, and now want to set the prop v-b-toggle.accordion-{{index}}, where index is the index from the v-for.

I've added *** before and after the prop in the code below to help find it.

Here's my code below to hopefully explain more:

 <b-card
                v-for="(book, index) in data"
                :key="index"
                no-body
                class="mb-1"
              >
                <b-card-header header-tag="header" class="p-1" role="tab">
                  <b-button block ***v-b-toggle.accordion-{{index}}*** variant="light"
                    >{{ book.title }} <span class="mx-4"> - </span>
                    {{ book.rating }}</b-button
                  >
                </b-card-header>
                <b-collapse
                  :id="String('accordion-' + (index))"
                  accordion="my-accordion"
                  role="tabpanel"
                >
                  <b-card-body style="min-height: 300px">
                    <b-card-text>
                     {{book.review}}
                    </b-card-text>
                  </b-card-body>
                </b-collapse>
              </b-card>

Hard coding it as b-toggle.accordion-1 works, so I think the dynamic value for :id works. I just can't get the accordion number dynamic.

Any help is greatly appreciated!

Answer 1

Solved

In the b-button, I ended up with:

v-b-toggle="'accordion-' + index"

and in the b-collapse:

:id="'accordion-' + index"