[Vuejs]-How to specify bootstrap accordion for data from API in vue js

by

0👍

✅

You can simply achieve that by concatenating the el.id in the v-b-toggle attribute and the accordion id as well.

Working Demo :

new Vue({
  el: '#app',
  data: {
    APIData: [{
        id: 1,
      name: 'Accordion 1'
    }, {
        id: 2,
      name: 'Accordion 2'
    }]
  }
})
#app {
  padding: 20px;
  height: 350px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"/>
<div id="app">
  <div v-for="el in APIData" :key="el.id" >
    <p>
      <b-btn v-b-toggle="`collapse-${el.id}`" variant="primary">Toggle {{ el.name }}</b-btn>
    </p>
    <b-collapse :id="`collapse-${el.id}`">
      <b-card>
        Collapse {{ el.name }} contents Here
      </b-card>
    </b-collapse>
  </div>
</div>

Leave a comment