Dynamic property for v-b-toggle

When dynamically building an accordion with a for-loop, we need to

<b-btn block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</b-btn>

But v-b-toggle.accordion1 can not be constructed dynamically, can it? Would :v-b-toggle="'#accordion' + index" have been more logical? Or am I missing something ? … ))

[tmorehouse]

v-b-toggle does accept a dynamic value to specify a single target ID. Not do not include the # as it doesn’t accept a CSS selector. just pass the plain id as a string (note it must be a string, and ID’s are not allowed to start with a digit):

<div v-for="id in [1,2,3,4]">
  <b-btn block v-b-toggle="'accordion-' + id" variant="info">
    Accordion {{ id }}
  </b-btn>
</div>

Note here is no # in front of the generated ID

[tdurant72]

I know this is closed but this might help other who need a “dynamic id”. I am doing an api call and creating the accordion based on the returned results. I also created a function to filter results based on a title so I can make one call but create separate accordions. <div id="app"> <div role="tablist"> <b-card no-body class="mb-1" v-for="(faq, index) in filteredTraffic"> <b-card-header header-tag="header" class="p-1" role="tab"> <b-btn block href="#" v-b-toggle="'accordion'+index" variant="info">{{faq.question}}</b-btn> </b-card-header> <b-collapse v-bind:id="'accordion'+index" accordion="my-accordion" role="tabpanel"> <b-card-body> <p class="card-text"> {{faq.answer}} <br> <a v-if="faq.links !==null" :href="faq.links.Url">{{faq.links.Description}}</a> </p> </b-card-body> </b-collapse> </b-card> </div> </div> I hope this helps.