Vue.jsで開閉するドロップダウンリストを実装する方法
Vue.jsで開閉するドロップダウンリストを実装したい。
開閉は実装出来たが、一つのリストをクリックするとすべてのリストが開いてしまう。
本記事ではこのような悩みを解決。
実装方法について、解説します。
実装サンプル
See the Pen
Vue3 アコーディオン by Kohei (@kouk05)
on CodePen.0
ドロップダウンリストの実装サンプルです。
リストをクリックすると、そのリストに応じたコンテンツだけ開閉されます。
実装手順は以下の通りです。
componentタグを定義
<div id="app">
<accordion question="クリック開閉01" answer="コンテンツ01"></accordion>
<accordion question="クリック開閉02" answer="コンテンツ02"></accordion>
<accordion question="クリック開閉03" answer="コンテンツ03"></accordion>
</div>
本記事では、Vue.jsのコンポーネント（パーツ化）を使って実装します。
コンポーネントにする事で、リストに応じたコンテンツだけ表示されるようになります。
accordionという任意のタグをVueインスタンス内に定義。
作成するリストの数だけaccordionタグを増減します。
accordionタグに二つの任意属性を定義。
question属性にクリック要素のテキスト、answer属性に開閉したら表示・非表示される内容を属性値にそれぞれ入れます。
Vue.js
const app = Vue.createApp({});
//コンポーネントを定義
app.component("accordion", {
data() {
return {
//開閉要素を非表示
open: false,
};
},
methods: {
//クリックしたら開閉
toggle: function () {
this.open = !this.open;
},
},
//開閉要素に入れる属性を定義
props: ["question", "answer"],
//テンプレート化するhtml要素の内容
template:
"<dl><dt v-bind:class='{open}' @click='toggle'>{{question}}</dt><dd v-show='open'>{{answer}}</dd></dl>",
});
app.mount("#app");
ドロップダウンリストを作るVue.jsコード例です。
先ほど定義したaccordionタグをコンポーネントとして使えるようcomponentメソッドを定義します。
dataメソッドにopenという任意のデータ名を定義。
methodsオプション内に、openデータの真偽値が変更されるように（falseからtrue）toggle関数を定義します。
propsを使って、accordionタグに前章で定義した二つの属性名を設定します。
開閉するHTML要素のテンプレート
<dl>
<dt v-bind:class="{open}" @click="toggle">{{question}}</dt>
<dd v-show="open">{{answer}}</dd>
</dl>
コンポーネント化したHTML要素の中身です。
dl要素で構築してます。
dt要素に@click=”toggle”属性を設定、クリックしたらtoggle関数が機能するようにします。
dd要素にv-showメソッドを定義。
値にデータメソッドで定義したopenを設定。
これで開閉が機能します。
v-bind:class=”{open}”属性をdt要素に設定。
開閉動作でopenクラスがdt要素にトグルで付与されるようにします。
dt要素、dd要素の中身にpropsで設定した値をそれぞれ入れます。
CSSで装飾
dt {
cursor: pointer;
position: relative;
background-color: #eee;
padding: 10px 20px 10px 10px;
}
// デフォルト
dt:before {
content: "＋";
display: block;
position: absolute;
right: 10px;
}
// 開いたら
dt.open:before {
content: "－";
}
開閉されてる事がわかるように、dt要素（クリック要素）に＋・－が表示されるよう、before要素を使ってCSSで装飾します。
以上でシンプルなドロップダウンリストの完成です。
まとめ
Vue.jsで開閉するドロップダウンリストを実装する方法について紹介しました。
以上で解説を終わります。