Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dynamic property for v-b-toggle

See original GitHub issue

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 ? … ))

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:20 (2 by maintainers)

github_iconTop GitHub Comments

tmorehousecommented, Nov 4, 2018

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 }}

Note here is no # in front of the generated ID

tdurant72commented, May 18, 2018

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Toggle | Directives - BootstrapVue
v-b -toggle is a light-weight directive for toggling the visibility of collapses and sidebars, and includes automated WAI-ARIA accessibility attribute ...
Read more >
Dynamically generating directive name in Vue Bootstrap
I would like to be able to give the dropdown item a directive like v-b-toggle="'collapse' + {{index}}" rather than hardcoding it like I've ......
Read more >
Accessing Dynamic Properties in LabVIEW - NI
To access dynamic properties of an object, you must first use the AsPropertyObject method of the object to convert the specific object reference ......
Read more >
Toggle CSS class for dynamical data with method-Vue.js
to make the class changes dynamically you should add a property called descShown to your projects array. in getProject action inside your store...
Read more >
Dynamic Block Functions | Lee Mac Programming
A set of Visual LISP functions for manipulating dynamic block properties. ... Toggle Dynamic Block Flip State - Lee Mac ;; Toggles the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found