SEECBC/FrontEnd/pages/learning/_chapter/_level/playground.vue

<template>
  <div>
    <component :is="currentPlayground" />
  </div>
</template>

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

const playgroundComponents = {
  'math/function': () => import('~/components/playground/nn/Simulation.vue'),
  'math/gradient-descent': () => import('~/components/playground/gradient-descent/Index.vue'),
  'tf/minist': () => import('~/components/playground/tf/Index.vue')
} as { [key: string]: Object }

export default Vue.extend({
  data() {
    return {
      currentPlayground:
        playgroundComponents[`${this.$route.params.chapter}/${this.$route.params.level}`]
    }
  }
})
</script>

<style scoped></style>