Add correct component handling to basic knowledge

client/src/pages/basicknowledge.vue

@@ -2,10 +2,11 @@
   <div class="basic-knowledge">
     <h1 class="basic-knowledge__title">{{basicKnowledge.title}}</h1>
 
-    <div v-for="(content, index) in basicKnowledge.contents"
+    <component v-for="component in basicKnowledge.contents"
-         v-html="content.value.text"
+               :key="component.id"
-         :key="index"
+               :is="component.type"
-    ></div>
+               v-bind="component">
+    </component>
 
   </div>
 </template>
@@ -13,6 +14,14 @@
 <script>
   import BASIC_KNOWLEDGE_QUERY from '@/graphql/gql/basicKnowledgeQuery.gql';
 
+  import TextBlock from '@/components/content-blocks/TextBlock';
+  import BasicKnowledgeWidget from '@/components/content-blocks/BasicKnowledgeWidget';
+  import ImageBlock from '@/components/content-blocks/ImageBlock';
+  import ImageUrlBlock from '@/components/content-blocks/ImageUrlBlock';
+  import VideoBlock from '@/components/content-blocks/VideoBlock';
+  import LinkBlock from '@/components/content-blocks/LinkBlock';
+  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
+
   export default {
     apollo: {
       basicKnowledge() {
@@ -25,6 +34,16 @@
       }
     },
 
+    components: {
+      'text_block': TextBlock,
+      'basic_knowledge': BasicKnowledgeWidget,
+      'image_block': ImageBlock,
+      'image_url_block': ImageUrlBlock,
+      'video_block': VideoBlock,
+      'link_block': LinkBlock,
+      'document_block': DocumentBlock,
+    },
+
     data() {
       return {
         basicKnowledge: {}