Vue bootstrap-vue accordion wont open

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

Hiws Hiws · Accepted Answer · 2020-02-25T09:12:36

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/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/[email protected]/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>

Vue bootstrap-vue accordion wont open

1 Answers