时间戳

首页 > 解决方案 > 如何在 VueJS 2 中使用 Bootstrap 5 折叠组件？

javascript - 如何在 VueJS 2 中使用 Bootstrap 5 折叠组件？

问题描述

我正在尝试在按钮上使用 Bootstrap 5 的“折叠”组件，但我不确定如何在 VueJS2 中实际使用它

我有一个像这样的文件组件：

<template>部分：

          <button
            class="btn btn-danger"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#collapseExample"
            aria-expanded="false"
            aria-controls="collapseExample"
          >
            Mark As Rejected
          </button>
          <div class="collapse" id="collapseExample">
            <div class="card card-body">
              Some placeholder content for the collapse component. This panel is
              hidden by default but revealed when the user activates the
              relevant trigger.
            </div>
          </div>

<script>部分：

<script>
import Collapse from 'bootstrap/js/dist/collapse'
export default {
    ...
    methods: {
        // how to manually enable the collapse via JavaScript???
    }
}
    ...
</script>

Bootstrap 文档有一个使用 vanilla JavaScript 的示例……但是如何使用 VueJS 呢？

Bootstrap 5 折叠原生 JavaScript 示例：

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

标签： javascriptvuejs2bootstrap-5

解决方案

我只是想多了。

为了在带有 HTML 数据属性的 VueJS 单文件组件中使用 Collapse，我所要做的就是简单地导入 Collapse 文件，如下所示：

import 'bootstrap/js/dist/collapse'

这也将允许轻松摇树，因为我只需要在需要时导入脚本。

推荐阅读