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 }} 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.
Simplemente puede lograrlo concatenando el.id
en el atributo vb-toggle
y la id
del acordeón también.
Demostración de trabajo :
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 vb-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>