如何在 VueJS2 中使用 Bootstrap 5 手风琴组件？

Question

我正在尝试将 VueJS 与 Bootstrap 5 的 accordion component 一起使用。我在其中一个手风琴项目上添加了v-for 指令，它“排序”有效....但样式有点偏离。例如，所有手风琴项目在开始时都显示为“活动”。另外，在开始时，第一个手风琴应该打开而不是关闭。

我用 VueJS 和 Bootstrap5 设置了一个代码框，你可以看到我的尝试。但是，我的尝试看起来不像 Bootstrap5 文档示例。

我的尝试： https://codesandbox.io/s/optimistic-wozniak-4y3n2?file=/src/components/HelloWorld.vue

如何正确使用 Vue 制作相同的 Bootstrap 5 Accordion 组件，如 their docs 中所示，该组件显示第一个手风琴在开始时打开，并在单击时正确突出显示活动的手风琴？谢谢！

Answer 1

所有项目都显示为活动状态，因为它们都没有collapsed 类，并且未折叠的项目显示为活动状态。

第一项没有显示，因为它的div 缺少show 类。

解决方案

您可以使用v-for 索引来确定哪个项目是第一个，并将结果绑定到class binding 中以用于上述适当的类。

假设v-for 索引命名为i：

1. 在.accordion-button 上，当i 大于0 时，使用类绑定来应用collapsed。这会使除第一个项目外的所有项目最初折叠并处于非活动状态。

2. 同样在.accordion-button 上，当i 为0 时，将aria-expanded 绑定到true。由于我们希望最初扩展第一项，因此我们设置此 ARIA 道具以反映这一点。

3. 在.accordion-collapse 容器上，当i 为0 时，使用类绑定来应用show。这使得第一项最初展开。

<div v-for="(post, i) in posts" :key="post.id" class="accordion-item">
  <h2 class="accordion-header" ...>
    <button
      class="accordion-button"
      :class="{ collapsed: i > 0 }" 1️⃣
      :aria-expanded="i === 0" 2️⃣
      ...
    >

    </button>
  </h2>

  <div
    class="accordion-collapse collapse"
    :class="{ show: i === 0 }" 3️⃣
    ...
  >

  </div>
</div>

demo