Nuxt/Vueで多階層(入れ子)に対応したアコーディオンを実装する

多階層でないシンプルなアコーディオンは自作コンポーネントで対応できる

↓シンプルなアコーディオンの内容は、
こちらの方の記事がとても分かりやすいので、ぜひ見てみてください

問題は多階層の場合

↓こちらのライブラリで実装できます

↓こんな感じのvue-collapse-transitionのラッパーのコンポーネントを作成して、

Accordion.vue

<template>
  <collapse-transition>
    <div v-show="isOpen">
      <slot />
    </div>
  </collapse-transition>
</template>

<script>
import { CollapseTransition } from '@ivanv/vue-collapse-transition'

export default {
  name: 'MoleculesAccordion',
  components: {
    CollapseTransition,
  },
  props: {
    isOpen: {
      type: Boolean,
      required: true,
    },
  },
}
</script>

↓こんな感じで好きなページでAccordion.vueを使用したらOKです！

pages/aiueo.vue

<template>
  <div :class="$style.wrapper">
    <div :class="$style.button" @click="isOpen1 = !isOpen1">&gt; 1つ目のアコーディオン</div>
    <Accordion :is-open="isOpen1">
      <div :class="$style.inline">
        <div :class="$style.button" @click="isOpen2 = !isOpen2">&gt; 2つ目のアコーディオン</div>

        <Accordion :is-open="isOpen2">
          <div :class="$style.result">OK</div>
        </Accordion>
      </div>
    </Accordion>
  </div>
</template>

<script>
import Accordion from '~/components/molecules/Accordion.vue'

export default {
  name: 'PageAiueo',
  components: {
    Accordion,
  },
  data() {
    return {
      isOpen1: false,
      isOpen2: false,
    }
  },
}
</script>

<style lang="sass" module>
.wrapper
  width: 400px
  margin: 0 auto
  margin-top: 100px

.button
  color: gray
  padding: 16px
  font-size: 16px
  background-color: white
  cursor: pointer

.inline
  padding-left: 24px

.result
  font-size: 16px
  color: white
  background-color: #87caff
  padding: 16px
  margin-left: 24px
</style>