Vue.jsでの外側クリックでのドロップダウンのクローズ

Vue.js v2のフロントエンド開発でドロップダウンリストを扱っている。.vueファイル内で状態変数を持たせて，ドロップダウンのクリックで状態変数をtrueにして，クラス属性を動的に変更することで実装していた。

しかし，ドロップダウンのクリック時の処理はあっても，ドロップダウンを開いた後に，外側をクリックしてもドロップダウンが閉じないことに気付いた。

そこで，Vue.jsでのドロップダウンの外側クリックでのクローズ処理について調べた。「枠外をクリックして閉じれるドロップダウンの実装 – Qiita」を参考にした。

基本的に，windowのクリックにイベントリスナーのコールバックを登録して，処理する。コード例は以下の通りとなる。

export default {
  data() {
    return {open: true}
  },
  mounted() {
    window.addEventListener('click', this.closeDropDown);
  },
  beforeDestroy() {
    window.removeEventListener('click', this.closeDropDown);
  },
...
  method: {
    closeDropDown(event) {
      if (!this.$el.querySelector('#dropdown').contains(event.target) {
        this.open = false;
      }
    }
  }
}

window.addEventListenerにコールバックを登録する。

こちらのコールバックでは，引数のevent.targetがイベントを発火した (クリックされた) 要素になっている。

ドロップダウン以外をクリックした場合にだけドロップダウンを閉じる。そのため，ドロップダウンのDOMを取得して，containsメソッドでクリックされた要素を含むか判定 (=ドロップダウンがクリックされたか判定) して，クリックされていなければ，状態をfalseにする。

複数のドロップダウンがある場合は，状態変数の数だけif文のブロックを用意して対応すればいい。

ひとまず，ドロップダウンの外側クリックでのクローズにはこれで対応できるだろう。