SEECBC/FrontEnd/pages/learning/index.vue

<template>
  <v-container>
    <v-row class="mb-6">
      <v-col
        v-for="ch in chapters"
        :key="ch.chapterNum"
        cols="auto"
      >
        <chapter-card :name="ch.name" :description="ch.description" class="mx-6" :to="ch.to" />
      </v-col>
    </v-row>
  </v-container>
</template>

<script lang="ts">
import Vue from 'vue'
import ChapterCard from '~/components/learning/ChapterCard.vue'
import { Chapter } from '~/data/chapters'

export default Vue.extend({
  components: {
    ChapterCard
  },
  async asyncData() {
    const chapters = await import('~/data/chapters')
    return { chapters: chapters.default }
  },
  data() {
    return {
      chapters: [] as Chapter[]
    }
  }
})
</script>