如何使用 Vue.js 实现动态 Bootstrap 4 手风琴答案

【问题标题】：How to implement a dynamic Bootstrap 4 accordion, using Vue.js如何使用 Vue.js 实现动态 Bootstrap 4 手风琴
【发布时间】：2019-12-26 21:40:29
【问题描述】：

我正在使用 Bootstrap 4（我也安装了 jQuery）与 Vue.js 一起创建手风琴

我在卡片上使用了 v-for 指令，我想为 json 文件中的每个项目复制该指令。然而，手风琴停止作为数据目标工作，并且 id 是相同的。我尝试过使用 v-bind (:data-target="'#collapse'+index")，正如您将在下面的示例中看到的那样，但我不是确定我哪里出错了。

下面是部分代码：

<div class="card" v-for="(faq, index) in filteredfaqs">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button
            class="btn btn-link"
            data-toggle="collapse"
            :data-target="'#collapse'+index"
            aria-expanded="true"
            aria-controls="collapseOne"
          >{{ faq.title}}</button>
        </h5>
      </div>

      <div
        id="'#collapse'+index"
        class="collapse show"
        aria-labelledby="headingOne"
        data-parent="#accordion"
      >
        <div class="card-body">{{ faq.body | snippet }}</div>
      </div>
    </div>

【问题讨论】：

你尝试过使用 BootstrapVue

标签： html vue.js bootstrap-4

【解决方案1】：

问题是您将id 设置为静态值'#collapse'+index，而不是动态出价且不带# 符号：

<div v-bind:id="'collapse'+index"
      class="collapse show"
      aria-labelledby="headingOne" 
      data-parent="#accordion"
></div>

这是一个演示：codepen

【讨论】：