VueJS中Bootstrap手风琴无法自动折叠问题求助

Hey there! Let's troubleshoot why your Bootstrap accordion in Vue isn't collapsing open panels when you select a new one. This is almost always a tiny attribute mismatch or missing setup, so let's walk through the most common fixes:

1. Make sure all accordion items share the same data-bs-parent #

Bootstrap uses this attribute to group panels together—without it, each panel acts independently. Here's what you need to do:

• Wrap all your accordion items in a container with a unique id (like id="monstersAccordion").
• Add data-bs-parent="#your-container-id" to both the trigger button and the collapsible panel for every item in the group.

2. Double-check id and data-bs-target pairs #

Every collapsible panel needs a unique id, and the corresponding trigger button's data-bs-target must exactly match that id. If you're rendering items with v-for, use dynamic bindings to ensure uniqueness:

• For the panel: :id="collapse-${item.id}"
• For the button: :data-bs-target="#collapse-${item.id}"

3. Fix up your template with these rules #

Here's a corrected example based on your code snippet (assuming you're looping through a list of monsters):

<template>
  <div class='monsters'>
    <div class="loading" v-if="loading">Loading…</div>
    <div v-if="error" class="error">{{ error }}</div>

    <!-- Accordion container with unique ID -->
    <div class="accordion" id="monstersAccordion">
      <div class="accordion-item" v-for="monster in monsters" :key="monster.id">
        <h2 class="accordion-header" :id="`heading-${monster.id}`">
          <button class="accordion-button"
                  type="button"
                  data-bs-toggle="collapse"
                  :data-bs-target="`#collapse-${monster.id}`"
                  :aria-expanded="false"
                  :aria-controls="`collapse-${monster.id}`"
                  data-bs-parent="#monstersAccordion"> <!-- Critical parent reference -->
            {{ monster.name }}
          </button>
        </h2>
        <div :id="`collapse-${monster.id}`"
             class="accordion-collapse collapse"
             :aria-labelledby="`heading-${monster.id}`"
             data-bs-parent="#monstersAccordion"> <!-- Panel also needs parent reference -->
          <div class="accordion-body">
            {{ monster.details }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Quick troubleshooting checks #

• Open your browser's dev tools console—if you see errors about "cannot find element", that's a sure sign your data-bs-target doesn't match a panel's id.
• Confirm you've included Bootstrap's JavaScript file (after Vue, if using CDNs) to enable the accordion interactions.
• If you're using Vue 3, stick with Bootstrap 5—they're fully compatible, so version conflicts shouldn't be an issue here.

内容的提问来源于stack exchange，提问作者Wouter Mellema