Multiple dynamic ids in v-b-toggle

[Frantab]

Hey :),
I cannot find how to add multiple dynamically created ids into directive v-b-toggle. I've found a solution just for a single dynamic id.
I've tried this, but none of this works:

v-b-toggle="`id-${name1} id-${name2} id-${name3}`"
v-b-toggle="`id-${name1}.id-${name2}.id-${name3}`"
v-b-toggle="{[`id-${name1}`]: true, [`id-${name2}`]: true, [`id-${name3}`]: true}"

Is there any way how to do it and set more than one modifier dynamically?

The whole problem in short:

<template>
  <div class="super-ultra-toggler">
    <b-button v-b-toggle="{[`id-${name1}`]: true, [`id-${name2}`]: true, [`id-${name3}`]: true}">toggle all</b-button>

    <div v-for="(name, index) in names"
      :key="`name-${index}`">
      <b-button v-b-toggle="`id-${name}`">toggle</b-button>
      <b-collapse :id="`id-${name}`" :visible="false">
        <p>{{ name }}</p>
      </b-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UltraSuperToggler',
  data() {
    return {
      name1: 'Bob',
      name2: 'Mark',
      name3: 'Lea',
      names: ['Bob', 'Mark', 'Lea']
    }
  }
}
</script>

[tmorehouse]

v-b-toggle will work with multiple ID's passed via directive modifiers, but only a single ID can be passed as the directive value (part between the quotes): https://bootstrap-vue.org/docs/components/collapse#trigger-multiple-collapse-elements

It sounds like you may need to use the v-model support (https://bootstrap-vue.org/docs/components/collapse#v-model-support) to trigger the collapse state for all collapses when toggling all.

[Hiws]

Alternatively to the v-model solution you could create a method which takes an array of id's as a parameter and use the option to emit on root, by looping through the passed in ID's and emitting for each of them.

<template>
  <b-button @click="toggleCollapses(['collapse-a', 'collapse-b'])">
  Toggle Both Collapse A and B
  </b-button>

  <!-- Elements to collapse -->
  <b-collapse id="collapse-a" class="mt-2">
    <b-card>I am collapsible content A!</b-card>
  </b-collapse>
  <b-collapse id="collapse-b" class="mt-2">
    <b-card>I am collapsible content B!</b-card>
  </b-collapse>
</template>

<script>
  toggleCollapses(ids) {
    ids.forEach((id) => {
       this.$root.$emit('bv::toggle::collapse', id)
    })
  }
</script>

[Frantab]

Thanks for the answers 🙂 . Both works. I knew about v-model solution but it was hard to implement for my case...I'll use toggleCollapses, it's exactly what I want 🙌

[tmorehouse]

@Frantab we will be "tweaking" how b-b-toggle works, and hopefully allow users to pass an array of IDs to toggle (via the v-b-toggle directive value).

[tmorehouse]

@Frantab BootstrapVue 2.14.0 has been released, and supports multiple target IDs passed as an array to the v-b-toggle directive value. See the updated docs at https://bootstrap-vue.org/docs/directives/toggle

[Frantab]

@tmorehouse Nice! 🙌

[jonaswebdev]

I was experiencing a bug only on production with "regular" way:
v-b-toggle="'accordion-'+index"
This code didn't work when I clicked on the button.

So the @Hiws solution using "this.$root.$emit" solved my issue, thank you a lot

[tmorehouse]

@jonaswebdev was the issue with the latest version (2.14.0)?

[jonaswebdev]

@tmorehouse no, my current version is "bootstrap-vue": "^2.0.0-rc.15", sorry.

I will update "bootstrap-vue" version and rollback my code without v-model approach, then back to you.

Thank you

[nachogarcia]

I updated from 2.13.0 to 2.14.0 and all of the project dropdowns broke.

They look like this

      <div
        v-b-toggle="`checkbox-${id}`"
      >
        ...
      </div>
      <b-collapse
        :id="`checkbox-${id}`"
      >

[tmorehouse]

@nachogarcia there will be a fix in v2.15.0 coming out in the next day or so.

[nachogarcia]

@tmorehouse I've tested it with v2.15.0 and it's still broken

[tmorehouse]

@nachogarcia could you create a reproduction jsfiddle/codepen/codesandbox? you can export to jsfiddle/codesanbox/codepen from the docs playground https://bootstrap-vue.org/play

[tmorehouse]

I just tested in the playground, and it works fine for me: https://codesandbox.io/s/little-pond-hnfci

[nachogarcia]

Uhm, you're right. I can't reproduce it in the sandbox either.

Will look deeper in the codebase to see what issues v14 introduced for me. Maybe there is something related to updates, styles, or something else.

[nachogarcia]

In case it helps, I'm using bootstrap-vue/nuxt, and not including css because I import it later via SCSS.
Imported bootstrap 4.5.0

[subhranilp]

is there a way we can pass dynamic value in the id property of the b-collapse component <b-collapse id="<variable>">

[Hiws]

is there a way we can pass dynamic value in the id property of the b-collapse component <b-collapse id="<variable>">

Use v-bind.
Like this: <b-collapse v-bind:id="yourVariable">

https://vuejs.org/v2/api/#v-bind

[bhavinjr]

Try this

<span class="f-12 font-ibm black-color" v-b-toggle="[`collapse-${d}`]">Collapse</span>

<b-collapse :id="`collapse-${id}`"></b-collapse>