Article.vue

<template>
  <div class="article" v-show="article.lemmas.length">
    <Header :lemmas="article.lemmas" />
    <div class="" v-if="article.body.pronunciation.length">
      <h3>Uttale</h3>
        <ul>
          <DefElement v-for="(element, index) in article.body.pronunciation" :key="index" :body='element' />
        </ul>
    </div>
    <div class="" v-if="article.body.etymology">
      <h3>Etymologi</h3>
        <ul>
          <DefElement v-for="(element, index) in article.body.etymology" :key="index" :body='element' />
        </ul>
    </div>
    <div class="">
      <h3>Definisjoner</h3>
      <ol>
        <Definition v-for="(definition, index) in definitions" :key="index" :body='definition' />
      </ol>
    </div>
  </div>
</template>

<script>
//import axios from "axios";
import DefElement from './DefElement.vue'
import Definition from './Definition.vue'
import Header from './Header.vue'

export default {
  name: 'Article',
  props: {
    article: Object
  },
  components: {
    DefElement,
    Definition,
    Header
  },
  computed: {
    definitions: function() {
      let defs = this.article.body.definitions
      if (defs.length == 1) {
        let types = defs[0].elements.reduce((acc, toAdd)=>acc.add(toAdd.type_), new Set())
        if (types.size == 1 && types.has('definition')) {
          return defs[0].elements
        }
      }
      return defs
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.article {
  margin-top: 30px;
}

h3 {
  margin: 40px 0 0;
}

a {
  //color: #42b983;
}

ol > li {
  padding-bottom: 2em;
}

ul {
  padding-top: 8px;
}

ul li {
list-style:none;
}

li ul .definition ul {
  padding-left: 6px;
}

ul li.definition {
  list-style: disc;
}
</style>