わたねこコーリング

野良プログラマ発、日々のアウトプット

【Vue.js】Bootstrap Collapse をアクセシビリティ属性を使わずに開閉する

Bootstrap5 を使った既存サイトページをデザインおよびルック&フィールはそのまま Vue.js 化する案件で、Collapse (ブロック要素をアニメーション付きで表示・非表示させるコンポーネント)を Vue 側に引き寄せて使った話です。

Bootstrap (以下 BS)の動的機能をもったコンポーネントは、動作の制御に関連する HTML タグに data-bs-xxx というようなアクセシビリティ属性を付与しておけば JavaScript コードを書かなくても(あるいは最小限のコードで)動作させることができます。それに ver.5 からは jQuery 非依存になったので、従来の JS コードを Vue.js のそれと共存させても問題は無さそうだったのですが、やっぱり制御機構がブラックボックス状態なのは気持ち悪いし小回りも効かないので、アクセシビリティ属性は一切使わずに Vue.js コード内から表示・非表示を行うように書き換えました。

コードサンプルはこちらです。


See the Pen
Bootstrap.Collapse on Vue3
by まりゆどぅ (@Mariyudu)
on CodePen.

と言っても、ドキュメントにも明記されている純正の API を使っただけで、特別なことはしていません。ポイントがあるとしたら、bootstrap.Collapse オブジェクトの生成は Vue のライフサイクルフック onMounted() で行うことくらいでしょうか。例1では toggle メソッドで、例2では show / hide メソッドでそれぞれ開閉を行っています。