【Vue.js】シンプルなアコーディオンを作成する方法

アコーディオンは、情報を整理して表示するための便利なUIコンポーネントです。Vue.js でアコーディオンを作成する方法を紹介します。ここでは、基本的なアコーディオンコンポーネントを実装し、展開・折りたたみ機能を追加する手順を解説します。

アコーディオンの実装

以下のコードは、シンプルなアコーディオンの実装例です。Vue.js の v-for ディレクティブを使って複数のセクションを生成し、クリックイベントでセクションの表示・非表示を切り替えます。

<template>
  <div class="accordion">
    <div 
      v-for="(item, index) in items" 
      :key="index" 
      class="accordion-item"
    >
      <div 
        class="accordion-header" 
        @click="toggle(index)"
      >
        {{ item.title }}
      </div>
      <div 
        class="accordion-content" 
        v-show="activeIndex === index"
      >
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: null,
      items: [
        { title: 'Section 1', content: 'Content for section 1' },
        { title: 'Section 2', content: 'Content for section 2' },
        { title: 'Section 3', content: 'Content for section 3' }
      ]
    };
  },
  methods: {
    toggle(index) {
      this.activeIndex = this.activeIndex === index ? null : index;
    }
  }
};
</script>

<style scoped>
.accordion {
  border: 1px solid #ddd;
  border-radius: 4px;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-header {
  padding: 10px;
  cursor: pointer;
  background: #f1f1f1;
}

.accordion-content {
  padding: 10px;
}
</style>

コードの解説

テンプレート部分では、v-for ディレクティブを用いてアコーディオンの各アイテムをループで表示しています。accordion-header クラスの要素がクリックされると toggle メソッドが呼ばれ、現在アクティブなインデックスがトグルされる仕組みです。アクティブなインデックスと一致する場合のみ、accordion-content が v-show ディレクティブにより表示されます。

スクリプト部分では、data メソッドでアクティブなインデックスとアイテムの配列を設定しています。toggle メソッドは、クリックされたアイテムのインデックスをアクティブにするか、すでにアクティブな場合は非アクティブにします。

スタイル部分では、accordion, accordion-item, accordion-header, accordion-content の各クラスにスタイルを適用し、アコーディオンの見た目を整えています。

まとめ

Vue.js でシンプルなアコーディオンを作成する方法を紹介しました。この基本的な実装を基に、さらに機能を追加したり、デザインをカスタマイズすることで、より複雑なアコーディオンを作成することができます。アコーディオンは、情報を効率的に表示するための強力なツールであり、ユーザーインターフェースをより直感的にするのに役立ちます。