vue.js - Vue 3 MD Bootstrap 不加载手风琴

Question

我正在为 Bootstrap v5 使用 Material Design 开发我的 Vue 3 应用程序。我想在我的组件中添加一个 Accordion，但它没有做任何事情。我从官方 MDB 网站复制了示例代码。我认为我的应用程序不知道手风琴，因为它只是以未格式化的方式呈现。

其他组件如 Buttons 等显示正常。

这是我的组件内部：

<template>
  <div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingOne">
        <button
          class="accordion-button collapsed"
          type="button"
          data-mdb-toggle="collapse"
          data-mdb-target="#flush-collapseOne"
          aria-expanded="false"
          aria-controls="flush-collapseOne"
        >
          Accordion Item #1
        </button>
      </h2>
      <div
        id="flush-collapseOne"
        class="accordion-collapse collapse"
        aria-labelledby="flush-headingOne"
        data-mdb-parent="#accordionFlushExample"
      >
        <div class="accordion-body">
          Test
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingTwo">
        <button
          class="accordion-button collapsed"
          type="button"
          data-mdb-toggle="collapse"
          data-mdb-target="#flush-collapseTwo"
          aria-expanded="false"
          aria-controls="flush-collapseTwo"
        >
          Accordion Item #2
        </button>
      </h2>
      <div
        id="flush-collapseTwo"
        class="accordion-collapse collapse"
        aria-labelledby="flush-headingTwo"
        data-mdb-parent="#accordionFlushExample"
      >
        <div class="accordion-body">
          Test
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h2 class="accordion-header" id="flush-headingThree">
        <button
          class="accordion-button collapsed"
          type="button"
          data-mdb-toggle="collapse"
          data-mdb-target="#flush-collapseThree"
          aria-expanded="false"
          aria-controls="flush-collapseThree"
        >
          Accordion Item #3
        </button>
      </h2>
      <div
        id="flush-collapseThree"
        class="accordion-collapse collapse"
        aria-labelledby="flush-headingThree"
        data-mdb-parent="#accordionFlushExample"
      >
        <div class="accordion-body">
          Test
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
})
</script>


<style lang="scss" scoped>

</style>

这是输出：

标签： vue.jsbootstrap-4bootstrap-5mdbootstrap