Estoy tratando de crear un feed de pedidos usando elementos de acordeón de bootstrap-vue y estoy luchando para abrir solo un elemento cuando lo presiono.

Intenté cambiar las identificaciones que son de api, pero no obtuve ningún resultado.

HTML:

 <div v-for="el in APIData" :key="el.id" > <div class="accordion" role="tablist" :id="el.id"> <b-card no-body class="mb-1" :id="el.id"> <b-card-header header-tag="header" class="p-1" role="tab" :id="el.id"> <b-button block vb-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>

Guion:

 <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>

Ejemplo de datos:

[ { precio: "179", id: "1", fecha de publicación: "04_04_2022", descripción: "algún desc bla bla bla", nombre: "algún nombre", fecha límite: "04_06_2022" }, { precio: "189" , id: "2", fecha de publicación: "05_04_2022", descripción: "otro desc bla bla bla", nombre: "algún nombre", fecha límite: "05_06_2022" }, { precio: "199", id: "3", fecha_publicado: "04_06_2022", descripción: "otro desc bla bla bla", nombre: "algún nombre", fecha límite: "06_06_2022" },

]

Nuevamente, necesito que me abran solo un acordeón, pero obtener tres en su lugar, por ejemplo, porque parece arrancar que todo es un elemento.