时间戳

首页 > 解决方案 > 如何使用 Vue.js 实现动态 Bootstrap 4 手风琴

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

问题描述

我正在使用 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>

标签： htmlvue.jsbootstrap-4

解决方案

问题是您正在id使用静态值设置它，'#collapse'+index而是应该动态出价并且没有#符号：

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

这是一个演示：codepen

推荐阅读