I am attempting to implement the Bootstrap 5 "collapse" component on a button in my VueJS2 project, but I am uncertain about how to integrate it.
Within my single file component, the structure is as follows:
<template> section:
<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> section:
<script>
import Collapse from 'bootstrap/js/dist/collapse'
export default {
...
methods: {
// How can I manually enable the collapse feature using JavaScript???
}
}
...
</script>
The Bootstrap documentation provided an example using vanilla JavaScript...but I need guidance on implementing it with VueJS.
Example of Bootstrap 5 Collapse in pure JavaScript:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})