underartikler i boks

src/App.vue

@@ -12,7 +12,7 @@ export default {
   name: 'app',
   data: function() {
     return {
-      article_id: window.location.href.split("/").pop()
+      article_id: parseInt(window.location.href.split("/").pop())
     }
   },
   components: {

src/components/Definition.vue

@@ -9,6 +9,7 @@
 <script>
 import DefElement from './DefElement.vue'
 import Example from './Example.vue'
+import SubArticle from './SubArticle.vue'
 
 var Definition = {
   name: 'Definition',
@@ -18,7 +19,8 @@ var Definition = {
   components: {
     DefElement,
     Definition,
-    Example
+    Example,
+    SubArticle
   },
   computed: {
     template_name_added: function(){
@@ -28,7 +30,8 @@ var Definition = {
               'template': {
                 'explanation': 'DefElement',
                 'definition': 'Definition',
-                'example': 'Example'
+                'example': 'Example',
+                'sub_article': 'SubArticle'
               }[element.type] || 'li',
               'element': element
           }

src/components/SubArticle.vue

+<template>
+  <li class="sub_article">
+    <span class="sub_article_header"><a :href="body.article_id">{{article.lemmas[0]['word']}}</a></span>
+    <ul>
+      <DefElement :body="body.intro" />
+      <Definition :body="article.definitions[0]" />
+    </ul>
+  </li>
+</template>
+
+<script>
+import axios from "axios";
+import DefElement from './DefElement.vue'
+
+export default {
+  name: 'SubArticle',
+  props: {
+    body: Object
+  },
+  data: function(){
+    return {
+      article: {
+        lemmas: [{word: ''}],
+        definitions: [{
+          elements: []
+        }]
+      }
+    }
+  },
+  components: {DefElement},
+  mounted: function(){
+    var self = this;
+    axios.get('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_doc/' + self.body.article_id)
+      .then(response => self.article = response.data._source)
+  },
+  beforeCreate: function () {
+    this.$options.components.Definition = require('./Definition.vue').default
+  }
+}
+
+</script>
+<style scoped>
+.sub_article_header {
+  font-weight: bold;
+}
+
+li.sub_article {
+  padding-top: 8px;
+}
+
+li.sub_article ul {
+  padding-top: 0px;
+}
+
+li.sub_article ul li {
+  list-style: none;
+}
+
+</style>