Vue.jsでtoggle機能実装！多箇所で使いたい時の実装方法

Vue.jsでtoggle機能を実装したい！
勢い始めてみたけれど、単体の1セットなら簡単ですが、多箇所で使いたい場合が意外とすんなりいかない。

設置するのはtoggleを着火するボタンと、それに対応するコンテンツ。
toggle機能を使う箇所がいくつかあり、個々のtoggleボタンの対象が決まっている案件です。

はい、何を言っているかわからないですね。
実際のコードを書きながら見ていきましょう。

親子関係を守ってtoggleしたい…慣れていないのでまだハマっちゃうVue.js
1. Vue.jsで多箇所で使うtoggle機能実装

親子関係を守ってtoggleしたい…慣れていないのでまだハマっちゃうVue.js

なんだかんだjQueryを何年も使ってきたので、DOM操作してゴニョゴニョしちゃえば……って思考にすぐいってしまいがち。
そんなわたくしがVue.jsを使ってみればすんなり気に入ったわけですが、触ったばかりなので未だに結構ハマります。

さて、今回実装したいのはtoggle機能。
「vue toggle」なんかでググってみると、下記のようなコードが出てきます。

うん、そうそう。シンプルで簡単ですよね、Vue.jsでのtoggle。
toggle機能を着火するボタンをクリックするたびに、isActiveの真偽値を変更して、表示領域の表示・非表示を切り替える感じ。

ただ、このままの考え方だと、toggle機能を使いたい箇所が増えるたびに厳しくなるんですよね。
toggle機能を使う箇所が増えるたびにdataやmethodsが増加するのはどうも、ね。

ちなみにこのようにHTMLだけ純粋に増やしたら、どれかのボタンを押すたびに表示領域全てがオープン・クローズしてしまいます。
当たり前ですけどね。じゃあどうやって書いたら良いだろう……ってのが今回のテーマです。長くなりましたw

Vue.jsで多箇所で使うtoggle機能実装

探してみると、ほとんどが上記の単一グループに対するtoggle機能の実装方法ばかり出てくるんですよね。
そんなこともあって、備忘録としてまとめておくことにしました。

実際のコードがこちら。

new Vue({
  el: "#app",
  data: {
    show_contents: [],
  },
  methods: {
    toggle: function (data) {
      if (this.show_contents.indexOf(data) >= 0) {
        this.show_contents = this.show_contents.filter(n => n !== data)
      }

      else {
        this.show_contents.push(data)
      }
    }
  }
})

dataにshow_contentsを持たせて、この値を判定に使っています。

        <button @click="toggle('1001')">詳細表示①</button>
        <div class="content" v-show="show_contents.indexOf('1001') >= 0">
            詳細な内容①
        </div>

toggle機能着火のボタンをクリックした段階でmethod呼び出し。その際に引数で特定の数列を渡します。
これならループ処理でデータを出力する際にも使えるかと。

methods側では引数の数列をshow_contentsの配列に追加していきます。
その際、show_contentsに引数の数列が存在した場合は削除（filter）します。

そのshow_contentsに数列が存在しているかをチェックすることで、表示エリアの表示・非表示を操作しています。

ググっても出てこないのは、書くまでも無く簡単なことだからだよ！って声も聞こえてきそうですがw
そこそこハマったので備忘録です。