如何在 vue js 中为来自 API 的数据指定 bootstrap 手风琴

Question

我正在尝试使用 bootstrap-vue 中的手风琴元素创建一个订单提要，但我很难在按下它时只打开一个元素。

我尝试更改来自 api 的 ID，但没有结果。

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

数据示例：

[ { 价格：“179”，编号：“1”， date_posted: "04_04_2022", 描述：“一些 desc bla bla bla”， name: "某个名字", 截止日期：“04_06_2022” }, { 价格：“189”，编号：“2”， date_posted: "05_04_2022", 描述：“另一个 desc bla bla bla”， name: "某个名字", 截止日期：“05_06_2022” }, { 价格：“199”，编号：“3”， date_posted: "06_04_2022", 描述：“另一个 desc bla bla bla”， name: "某个名字", 截止日期：“06_06_2022” },

]

同样，我只需要打开一个手风琴，但要打开三个，例如因为在bootstrap看来都是一个元素。

Answer 1

您可以简单地通过将 v-b-toggle 属性中的 el.id 和手风琴 id 连接起来来实现。

工作演示：

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>

如何在 vue js 中为来自 API 的数据指定 bootstrap 手风琴

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

javascript

api

vue.js

bootstrap-4