以前にjQueryを使ってタブ切り替え機能を実装してみた記事（jQueryでベーシックなタブパネルメニューを実装する）を公開しましたが、最近ではVue.jsもよく使われており、今回はVue.jsでタブ切り替え機能を作成してみたいと思います。Vue.jsで作成することで、よりシンプルにわかりやすく、少ないメソッドで実装することができますのでコードの見通しも良くなり保守性にも優れます。   早速コードを見ていきます。まずはJavaScriptからですが、CDNやライブラリを読み込む場合は下記のようにVueインスタンスを作成し、その中にオプションを書いていきます。もしくはVueCLIやNuxt.jsなどで単一コンポーネントを使う場合には.vueファイルの中のscriptタグの中に書いていきます。まずは対象となるエレメントを定義します。そしてdataオプションにタブのラベルとコンテンツを配列の値で持たせておきます。さらに現在表示されているタブのインデックスを表す数値も用意しておきます。デフォルトでは最初のタブが表示されている形です。 【JavaScript（Vue）】

const vueModel = new Vue({
  el: '#app',
  data: {
    labels: [
      'Tab1', 'Tab2', 'Tab3', 'Tab4'
    ],
    panels: [
      'Tab1のコンテンツが入ります',
      'Tab2のコンテンツが入ります',
      'Tab3のコンテンツが入ります',
      'Tab4のコンテンツが入ります'
    ],
    current: 0
  },
  methods: {
    tabSelect(index) {
      this.current = index;
    }
  }
});

  最後にmethodsのオプションでタブをクリックした時の処理を記述します。引数を取っておりクリックしたタブ要素のインデックスを受け取るようにしています。こうすることでどのタブがクリックしたかがわかるようになっています。受け取ったインデックスをdataオプションに定義している現在のタブを表す変数に格納することで表示されているタブの情報を更新します。   続いてHTMLです。最近はPugを使うことが多いのでPugで書いていますが、基本的にHTMLも同じようになります。それぞれタブのラベル部分とコンテンツ部分を用意し、dataオプションで定義した配列データをv-forで展開してきます。HTMLの中にはその値が出力されるようにしておきます。そしてdataオプションで保持しているインデックスの情報と、タブ要素のインデックスが同じ場合に表示されていることを示すclass名がつくようにしておきます。最後にラベル部分にはmethodsで定義した選択されたタブを更新する処理をクリックイベントで呼び出すようにします。 【Pug】※一部抜粋

div#app
  ul.tab-label
    li(v-for="(label, index) in labels" :key="index" :class="current === index ? 'current' : ''" @click="tabSelect(index)").
      {{ label }}
  ul.tab-panel
    li(v-for="(panel, index) in panels" :key="index" :class="current === index ? 'current' : ''").
      {{ panel }}

  今回はタブのコンテンツにテキストデータのみを入れる想定ですので配列データの値を出力していますが、もしHTMLや特定のコンポーネントを使う場合には下記のようにv-ifなどでタブのインデックスに合わせて出力するHTMLやコンポーネント切り替えられるようにしておくといいかと思います。

li(v-for="(panel, index) in panels" :key="index" :class="current === index ? 'current' : ''").
  div(v-if="current === 0").
    Tab1のコンテンツが入ります
  div(v-else-if="current === 1").
    Tab2のコンテンツが入ります
  div(v-else-if="current === 2").
    Tab3のコンテンツが入ります
  ..........

  最後にCSSでタブの切り替えができるように表示を調整していきます。選択中のタブとそうでないものをしっかりとわかるようにしておきます。 【Sass（SASS）】※一部抜粋

.tab-label
  display: flex
  flex-wrap: nowrap
  li
    padding: 16px
    background: #ddd
    &.current
      background: coral
      color: white
.tab-panel
  li
    width: 100%
    padding: 16px
    border: 4px solid coral
    &:not(.current)
      display: none

  これでVue.jsでタブ切り替え機能を実装することができました。今回作成したサンプルは下記のようになります。ご参考にどうぞ。  

See the Pen tabmenu_on_vue by designsupply (@designsupply) on CodePen.

 

---

  タブ切り替え機能はウェブサイトのUIでもよく見かけますが、いろんな実装方法があるかと思います。jQueryなどを使って実装するケースもありますが、Vue.jsを使うことでよりシンプルにわかりやすく、さらに保守性も優れたように作成することができるのでオススメです。ぜひ一度試してみてください。