[+] Checkbox group

src/App.vue

@@ -5,34 +5,34 @@
     <router-link class="rlink" to="/">tf</router-link>
     |
     <router-link class="rlink" to="/about">About</router-link>
-    <div id="application">
-      <Navbar />
-    </div>
   </p>
-  <input
-    v-model="contentType"
-    type="checkbox"
-    value="Video"
-    name="video"/>
-  <label for="video">Video</label>
-  <input v-model="contentType" 
-          type="checkbox" 
-          value="Text" 
-          name="text" />
-  <label for="text">Text</label>
-  <input
-    v-model="contentType"
-    type="checkbox"
-    value="Examples"
-    name="examples"/>
-  <label for="examples">Examples</label>
-  <input
-    v-model="contentType"
-    type="checkbox"
-    value="QnA"
-    name="qna"/>
-  <label for="qna">QnA</label>
-  <p>Content Type: {{ contentType }}</p>
+  <div id="application">
+    <Navbar />
+  </div>
+<!--  <input-->
+<!--    v-model="contentType"-->
+<!--    type="checkbox"-->
+<!--    value="Video"-->
+<!--    name="video"/>-->
+<!--  <label for="video">Video</label>-->
+<!--  <input v-model="contentType" -->
+<!--          type="checkbox" -->
+<!--          value="Text" -->
+<!--          name="text" />-->
+<!--  <label for="text">Text</label>-->
+<!--  <input-->
+<!--    v-model="contentType"-->
+<!--    type="checkbox"-->
+<!--    value="Examples"-->
+<!--    name="examples"/>-->
+<!--  <label for="examples">Examples</label>-->
+<!--  <input-->
+<!--    v-model="contentType"-->
+<!--    type="checkbox"-->
+<!--    value="QnA"-->
+<!--    name="qna"/>-->
+<!--  <label for="qna">QnA</label>-->
+<!--  <p>Content Type: {{ contentType }}</p>-->
 
   <router-view></router-view>
 </template>

src/views/Home.vue

@@ -1,5 +1,12 @@
 <template>
     <div id="Home">
+        <el-checkbox-group v-model="options">
+            <el-checkbox label="Text" />
+            <el-checkbox label="Video" />
+            <el-checkbox label="Examples" />
+            <el-checkbox label="Q&A" />
+        </el-checkbox-group>
+
         <div class="category" v-for="ty of types" :key="ty">
             <h2>{{ty}}</h2>
             <div class="api" v-for="api of apis(ty)" :key="api.name">
@@ -18,8 +25,9 @@
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
 import meta from '../meta.json';
+import metaYT from '../meta_yt_links.json'
 import { marked } from 'marked';
-import {$} from '../main';
+import {$} from '@/main';
 
 interface APIEntry
 {
@@ -37,6 +45,8 @@ function onlyUnique(value, index, self) {
 @Options({components: {}})
 export default class Home extends Vue
 {
+    options = ['Text']
+
     get types(): string[]
     {
         return meta.map(it => it.type).filter(onlyUnique)
@@ -96,4 +106,4 @@ export default class Home extends Vue
 
     h1, h2
         font-size: 1em !important
-</style>
+</style>

src/views/PrimarySymbol.vue

@@ -19,7 +19,7 @@
 import {Options, Vue} from 'vue-class-component';
 import meta from '../meta_primary_symbol.json';
 import { marked } from 'marked';
-import {$} from '../main';
+import {$} from '@/main';
 
 interface APIEntry
 {
@@ -95,4 +95,4 @@ export default class PrimarySymbol extends Vue
 
     h1, h2
         font-size: 1em !important
-</style>
+</style>