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

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

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

設置するのはtoggleを着火するボタンと、それに対応するコンテンツ。
toggle機能を使う箇所がいくつかあり、個々の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機能の実装方法ばかり出てくるんですよね。
そんなこともあって、備忘録としてまとめておくことにしました。

実際のコードがこちら。

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

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

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

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

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

 

カテゴリ別記事一覧(全カテゴリ一覧
Vue.js ウェブ制作・運用

コメントを残す

*