Vue3でBootstrapのドロップダウンメニュー内の特定のタグをクリックしても閉じないようにする方法

Bootstrapではドロップダウンメニューを開いた後クリックすると閉じるようになっている。

Bootstrapではドロップダウンメニューを開いた後クリックすると閉じるようになっている。
イベントを抑止することで対応可能です。
Vue3でBootstrapを使用した場合の方法は次の通りです。
1.閉じさせたくないテキストを任意のタグで囲んでイベントを追加
(例)
メニュータイトル

2.method内にイベントを抑止する処理を含めた関数を追加
(例)
// ■概要:イベントの抑止
// ■引数:IN,Object,イベントオブジェクト
// ■戻値:無し
deterEvent: function(e) {
// ▼イベントのさらなる伝播を抑止
e.stopPropagation()
}

関連書籍

※本記事はアフィリエイトリンクを含みます。