Vueコード答え・解説

雛形コードを元に Vue.js を用いて実装していきましょう。

1. アイコンとアコーディオンの中身を v-show で管理する。

#1-1. 各アコーディオンの変数を用意する。

app.js

new Vue({
  el: '#app',
  data: {
    accordion1: {
      isOpen: false, // 追加
    },
    accordion2: {
      isOpen: false, // 追加
    },
    accordion3: {
      isOpen: false, // 追加
    },
  },
});

#1-2. 各アイコンに v-show を記載する。

雛形コードではアコーディオンを閉じたときのアイコンと開いているときのアイコンが両方とも表示されています。変数(isOpen)が false のときは閉じているアイコンを、true のときは開いてるアイコンを v-show で表示できるようにしましょう。

index.html

<div id="app">
  <div class="menu menu--red">
    <a class="menu__head">
      <h1 class="menu__title">アコーディオン1</h1>
      <!-- v-showディレクティブを記載する。 -->
      <!-- isOpenがfalseの時に描画される -->
      <i
        v-show="!accordion1.isOpen"
        class="fas fa-chevron-down fa-2x menu__icon"
      ></i>
      <!-- v-showディレクティブを記載する。 -->
      <!-- isOpenがtrueの時に描画される -->
      <i
        v-show="accordion1.isOpen"
        class="fas fa-chevron-up fa-2x menu__icon"
      ></i>
    </a>
    <div class="menu__body">
      <!-- 省略: アコーディオンの中身 -->
    </div>
  </div>
  
  <div class="menu menu--blue">
    <a class="menu__head">
      <h1 class="menu__title">アコーディオン2</h1>
      <!-- v-showディレクティブを記載する。 -->
      <!-- isOpenがfalseの時に描画される -->
      <i
        v-show="!accordion2.isOpen"
        class="fas fa-chevron-down fa-2x menu__icon"
      ></i>
      <!-- v-showディレクティブを記載する。 -->
      <!-- isOpenがtrueの時に描画される -->
      <i
        v-show="accordion2.isOpen"
        class="fas fa-chevron-up fa-2x menu__icon"
      ></i>
    </a>
    <div class="menu__body">
      <!-- 省略: アコーディオンの中身 -->
    </div>
  </div>
  
  <div class="menu menu--green">
    <a class="menu__head">
      <h1 class="menu__title">アコーディオン2</h1>
      <!-- v-showディレクティブを記載する。 -->
      <!-- isOpenがfalseの時に描画される -->
      <i
        v-show="!accordion1.isOpen"
        class="fas fa-chevron-down fa-2x menu__icon"
      ></i>
      <!-- v-showディレクティブを記載する。 -->
      <!-- isOpenがtrueの時に描画される -->
      <i
        v-show="accordion1.isOpen"
        class="fas fa-chevron-up fa-2x menu__icon"
      ></i>
    </a>
    <div class="menu__body">
      <!-- 省略: アコーディオンの中身 -->
    </div>
  </div>
</div>

#1-3. 各アコーディオンの中身に v-show を記載する。

index.html

<div id="app">
  <div class="menu menu--red">
    <a class="menu__head">
      <h1 class="menu__title">アコーディオン1</h1>
      <!-- 省略: アイコン -->
    </a>
    <!-- v-showディレクティブを記載する。 -->
    <div class="menu__body" v-show="accordion1.isOpen">
      <div class="menu__content">
        <p class="menu__text">アコーデオン1の中身</p>
        <p class="menu__text">アコーデオン1の中身</p>
      </div>
    </div>
  </div>
  
  <div class="menu menu--blue">
    <a class="menu__head">
      <h1 class="menu__title">アコーディオン2</h1>
       <!-- 省略: アイコン -->
    </a>
    <!-- v-showディレクティブを記載する。 -->
    <div class="menu__body" v-show="accordion2.isOpen">
      <div class="menu__content">
        <p class="menu__text">アコーデオン2の中身</p>
        <p class="menu__text">アコーデオン2の中身</p>
      </div>
    </div>
  </div>
  
  <div class="menu menu--green">
    <a class="menu__head menu--green">
      <h1 class="menu__title">アコーディオン3</h1>
       <!-- 省略: アイコン -->
    </a>
    <!-- v-showディレクティブを記載する。 -->
    <div class="menu__body" v-show="accordion3.isOpen">
      <div class="menu__content">
        <p class="menu__text">アコーデオン3の中身</p>
        <p class="menu__text">アコーデオン3の中身</p>
      </div>
    </div>
  </div>
</div>

2. アコーディオンを v-on:click で表示を切り替える。

#2-1. 関数を用意する。

app.js

new Vue({
  el: '#app',
  data() {
    return {
      accordion1: {
        isOpen: false,
      },
      accordion2: {
        isOpen: false,
      },
      accordion3: {
        isOpen: false,
      },
    };
  },
  methods: {
    toggleAccordion1() {
      this.accordion1.isOpen = !this.accordion1.isOpen; // 追加
    },
    toggleAccordion2() {
      this.accordion2.isOpen = !this.accordion2.isOpen; // 追加
    },
    toggleAccordion3() {
      this.accordion3.isOpen = !this.accordion3.isOpen; // 追加
    },
  },
});

#2-2. アコーディオンの中身に v-on:click を記載する。

index.html

<div id="app">
  <div class="menu menu--red">
    <a class="menu__head" @click="toggleAccordion1">
      <h1 class="menu__title">アコーディオン1</h1>
      <!-- 省略: アイコン -->
    </a>
    <div class="menu__body">
      <!-- 省略: アコーディオンの中身 -->
    </div>
  </div>
  
  <div class="menu menu--blue">
    <a class="menu__head" @click="toggleAccordion1">
      <h1 class="menu__title">アコーディオン2</h1>
      <!-- 省略: アイコン -->
    </a>
    <div class="menu__body">
      <!-- 省略: アコーディオンの中身 -->
    </div>
  </div>
  
  <div class="menu menu--green">
    <a class="menu__head" @click="toggleAccordion1">
      <h1 class="menu__title">アコーディオン2</h1>
      <!-- 省略: アイコン -->
    </a>
    <div class="menu__body">
      <!-- 省略: アコーディオンの中身 -->
    </div>
  </div>
</div>