Html 如何使用Vue.js实现动态引导4手风琴

我正在使用Bootstrap4（我还安装了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> 

{{faq.title}
{{faq.body | snippet}

问题在于，您正在使用静态值设置

id

，该静态值为

'#collapse'+index

，而应动态投标，且不带

符号：

---

下面是一个演示：

您是否尝试过使用BootstrapVue