Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple dynamic ids in v-b-toggle #4834

Closed
Frantab opened this issue Feb 26, 2020 · 18 comments · Fixed by #5336
Closed

Multiple dynamic ids in v-b-toggle #4834

Frantab opened this issue Feb 26, 2020 · 18 comments · Fixed by #5336

Comments

@Frantab
Copy link

Frantab commented Feb 26, 2020

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
Copy link
Member

tmorehouse commented Feb 26, 2020

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
Copy link
Member

Hiws commented Feb 26, 2020

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
Copy link
Author

Frantab commented Feb 26, 2020

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
Copy link
Member

tmorehouse commented May 6, 2020

@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
Copy link
Member

tmorehouse commented May 12, 2020

@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
Copy link
Author

Frantab commented May 12, 2020

@tmorehouse Nice! 🙌

@jonaswebdev
Copy link

jonaswebdev commented May 14, 2020

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
Copy link
Member

tmorehouse commented May 14, 2020

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

@jonaswebdev
Copy link

jonaswebdev commented May 15, 2020

@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
Copy link

nachogarcia commented May 18, 2020

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
Copy link
Member

tmorehouse commented May 18, 2020

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

@nachogarcia
Copy link

nachogarcia commented May 23, 2020

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

@tmorehouse
Copy link
Member

tmorehouse commented May 23, 2020

@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
Copy link
Member

tmorehouse commented May 23, 2020

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

@nachogarcia
Copy link

nachogarcia commented May 23, 2020

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
Copy link

nachogarcia commented May 23, 2020

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
Copy link

subhranilp commented Sep 29, 2020

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

@Hiws
Copy link
Member

Hiws commented Sep 29, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
v2.14.0
  
Done
7 participants