Multiple dynamic ids in v-b-toggle #4834
Description
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>