How to specify bootstrap accordion for data from API in vue js-CodePudding

I'm trying to create an order feed using accordion elements from bootstrap-vue and I am struggling with making only one element opened when I press it.

I've tried changing ids which are from api, but have no result.

HTML:

<div v-for="el in APIData" :key="el.id" >

  <div  role="tablist" :id="el.id">
    <b-card no-body  :id="el.id">
      <b-card-header header-tag="header"  role="tab" :id="el.id">
        <b-button block v-b-toggle.accordion-1 variant="dark">{{ el.name }}. Deadline: {{ el.deadline }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Price: <strong>{{ el.price }}</strong></b-button>
      </b-card-header>
      <b-collapse id="accordion-1" accordion="my-accordion" role="tabpanel" > 
        <b-card-body>
          <b-card-text>
        <div> <p> <strong>Posted:</strong> {{ el.date_posted }}.  <br />{{ el.description }}</p> </div>
        <a class= "button btn btn-dark">More</a>
     </b-card-text> 
        </b-card-body>
      </b-collapse>
    </b-card>
   </div>


</div>

Script:

<script>
import axios from 'axios'
export default {
    name: 'Orders',
    data () {
      return {
          APIData: [],
        }
    },


    created () {
          axios
          .get('/api/v1/orders/')
          .then(response => {
            this.APIData = response.data
        console.log(response.data)
          })
          .catch(err => {
            console.log(err)
          })   
    },


}
</script>

Example of data:

[ { price: "179", id: "1", date_posted: "04_04_2022", description: "some desc bla bla bla", name: "some name", deadline: "04_06_2022" }, { price: "189", id: "2", date_posted: "05_04_2022", description: "another desc bla bla bla", name: "some name", deadline: "05_06_2022" }, { price: "199", id: "3", date_posted: "06_04_2022", description: "another desc bla bla bla", name: "some name", deadline: "06_06_2022" },

]

Again, I need to get opened only one accordion but get three instead e.g. because it seems to bootstrap that it is all one element.

CodePudding user response：

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/[email protected]/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>