Multiple dynamic ids in v-b-toggle

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>

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

[tmorehouse]

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