Vue bootstrap-vue accordion wont open - vue.js

Question

I am new to vue and really struggle to get my dynamically created accordion to expand when clicked on.
I think its something basic I am missing but I have been stuck for a while.
This codepen show my troubles, I cant figure it out?
<template>
<div role="tablist">
<b-card v-for="(item, index) in feature_info" no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-button block href="#" v-bind:v-b-toggle="'accordion-' + index" variant="info">[[ item.layerName ]]</b-button>
</b-card-header>
<b-collapse v-bind:id="'accordion-' + index" accordion="my-accordion" role="tabpanel">
<b-card-body>
<b-card-text>Mock text</b-card-text>
</b-card-body>
</b-collapse>
</b-card>
</div>
</template>
Link to codepen

Answer 1

Your problem is the v-bind:v-b-toggle="'accordion-' + index".
v-b-toggle is a directive and you therefor don't need to use v-bind on it. So if you just remove v-bind: from it, it should work.
new Vue({
el: '#app',
delimiters: ['[[',']]'],
data: {
message:"Hello",
feature_info:[
{layerName: 'Hello Vue!'},
{layerName: 'Second'}
],
}
})
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue#2.5.0/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.5.0/dist/bootstrap-vue.js"></script>
<div id="app">
<div role="tablist">
<b-card v-for="(item, index) in feature_info" no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-button block href="#" v-b-toggle="'accordion-' + index" variant="info">[[ item.layerName ]]</b-button>
</b-card-header>
<b-collapse v-bind:id="'accordion-' + index" accordion="my-accordion" role="tabpanel">
<b-card-body>
<b-card-text>Mock text</b-card-text>
</b-card-body>
</b-collapse>
</b-card>
</div>
</div>