もう1歩踏み込んだcomponentの使い方を試してみましょう。
WEBサイトやUIを作っていると、よく「タブ」に出会います。
クリックすると、一定エリアの表示が変わるボタンのようなものですね。
Vue.jsを使うと、こうした動作もすぐ出来てしまいます。
何かを表示させるだけがVue.jsではありません。
あくまでも基本はJavaScriptです。
動きをつけたり、表示を切り替えたり。
あとでご説明しますが、アニメーションだって扱えます。
JavaScriptで出来ることは大体できます。
しかも、管理や運用がしやすいように作ることが出来ます。
リアクティブに動いてくれるので、何か余分なソースを書く必要もありません。
では、さっそくタブを使って表示エリアの切り替えを行ってみましょう。
今回のミッション
基本的な概念としては、そんなに難しくありません。
まずcomponentを2つ作ります。
あとはcomponentをクリックしたタブに合わせて切り替えます。
百聞は一見にしかずということで、一度サンプルを見てみましょう。
ソースコードの解説を参考に、上記を再現してみてください。
一通りソースコードを読んで理解してから取り組むと良いでしょう。
新しい書き方も出てくるので、いきなりだと難しいです。
どうしても動かなければ、下記からファイルをダウンロードしてください。
細かい箇所のチェックはエラーなど、見つけてみましょう。
なお、毎回ご提供するこちらはあくまでも、参考ファイルです。
より良い書き方を見つけたら、ご自身で改良してみてください。
ソースコードの解説
まずは、下記ソースコードに目を通してみましょう。
全体の流れを把握したら、すぐに自分で実践してみてください。
<div id="app"> <!--ボタンをクリックすると、現在のタブのidがcurrentTabに入ります(v-on:click)--> <!--するとscript内のdataにあるcurrentTabの中がidに切り替わります--> <!--その変化を検知して、算出プロパティ(computed)が動きます--> <!--現在のcurrentTabを取得してtab-(currentTab)という形に繋げ、コンポーネント呼び出します。--> <!--v-bind:classはcurrentTabがtab.idと一緒だったらcompTabButton-activeが追加されるという意味です--> <button v-for="(tab,index) in tabs" v-bind:key="tab.id" class="compTabButton" v-bind:class="{ 'compTabButton-active': tab.id === currentTab }" v-on:click="currentTab = tab.id"> <!--v-forでタブ一覧を表示させています--> <span v-bind:class="tab.id">{{ tab.text }}</span> </button> <!--currentTabComponentに返されたtab-のテキストから適応するcomponentを判断します--> <!---script内componentのtab-homeなど、文字列が一致したcomponentが適応されます-> <!--結果、中のコンテンツが切り替わるという流れです--> <component v-bind:is="currentTabComponent" class="app-tab"></component> </div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> Vue.component('tab-home', { template: '<div>ホームのコンポーネントです。</div>' }) Vue.component('tab-posts', { template: '<div>投稿のコンポーネントです。</div>' }) Vue.component('tab-archive', { template: '<div>一覧のコンポーネントです。</div>' }) new Vue({ el: '#app', data: { currentTab: 'home', tabs: [ {id:'home',text:"ホーム"}, {id:'posts',text:"投稿"}, {id:'archive',text:"一覧"} ] }, computed: { currentTabComponent: function () { //currentTabComponentにtab-(currentTab)の文字列を繋げ呼び出します。 return 'tab-' + this.currentTab; } } }) </script>
.compTabButton { padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid #ccc; cursor: pointer; background: #f0f0f0; margin-bottom: -1px; margin-right: -1px; } .compTabButton:hover { background: #e0e0e0; } .compTabButton-active { background: #e0e0e0; } .app-tab { border: 1px solid #ccc; padding: 10px; }
なんとなく、流れはお分かり頂けたでしょうか。
ポイントは「処理の流れ」をしっかり把握することです。
クリックされてから、どのように処理が走るのか、順番通りに理解しましょう。
- ボタンを押すと、dataにあるcurrentTabが変わる。
- currentTabの変化を検知して算出プロパティが起動。
- 押したタブ内のidを取得し「tab-」という文字列とくっつける。
- 出来た文字列(例 : tab-home)と同じ名前を持つcomponentを表示させる。
上記の流れを反芻して、意味をしっかり理解しましょう。
また、タブそのものもhtml直書きではなくv-forを使って表示しています。
最初は概念を認識するのが、難しいかもしれません。
何度も繰り返せば理解できますので、向き合ってみてください。
1つ1つ確認しながら理解してみましょう。