SEECBC/FrontEnd/pages/learning/_chapter/index.vue

<template>
  <v-row>
    <v-col cols="12" md="3">
      <!-- Level List -->
      <v-list rounded>
        <v-subheader>{{ chapter }}</v-subheader>
        <v-list-item-group color="#5588e5">
          <v-list-item
            v-for="level in levels"
            :key="level.levelNum"
            nuxt
            :to="`${level.to}/tutorial`"
          >
            <v-list-item-icon>
              <v-icon>mdi-book-variant</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{ $t(level.name) }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-col>
  </v-row>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  async asyncData({ params }) {
    // Get levels information of this chapter and set it in store
    const meta = await import(`~/docs/${params.chapter}/meta.json`)
    return { levels: meta.default }
  },
  computed: {
    chapter() {
      return this.$route.params.chapter
    }
  },
  methods: {
    getLevelName(rawName: string): string {
      const tokens = rawName.split('.')
      return tokens[tokens.length - 1]
    }
  }
})
</script>

<style scoped></style>