如何使用引导带5手风琴组件与VueJS2？

Question

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

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

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

我如何正确地使用Vue来制作一个相同的Bootstrap 5手风琴组件，如他们的医生中所示，该组件显示在开始时打开的第一个手风琴，并在单击时正确地突出显示活动手风琴？谢谢!

Answer 1

所有项目都显示为活动项，因为它们都没有collapsed类，而非折叠项显示为活动项。

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

解决方案

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

假设v-for索引名为i

1. 在.accordion-button上，当i大于0时，使用类绑定应用0。这使得除第一项之外的所有项目都开始折叠和不活动。
2. 同样在.accordion-button上，当i是0时，将i绑定到true。由于我们希望第一个项目得到适当的扩展，我们设置了这个ARIA支柱来反映这一点。
3. 在.accordion-collapse容器上，当i是0时，使用类绑定应用0。这使得最初扩展的第一个项目。

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

演示