Article.vue

<template>
  <article v-show="article.lemmas.length || article.error">
    <Header :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" />
    <section v-if="! article.error && article.body.pronunciation && article.body.pronunciation.length">
      <h3>Uttale</h3>
        <ul>
          <DefElement v-for="(element, index) in article.body.pronunciation" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" />
        </ul>
    </section>
    <section v-if="! article.error && article.body.etymology && article.body.etymology.length">
      <h3>Etymologi</h3>
        <ul>
          <DefElement v-for="(element, index) in article.body.etymology" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" />
        </ul>
    </section>
    <section v-if="! article.error">
      <h3>Definisjoner</h3>
      <ol>
        <Definition v-for="definition in article.body.definitions" :dictionary="dictionary" :level="1" :key="definition.id" :body='definition' @article-click="article_link_click" />
      </ol>
    </section>
    <section v-if="article.error">
      <h1>Ooops...</h1>
      <p>{{article.error}}</p>
    </section>
  </article>
</template>

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

export default {
  name: 'Article',
  props: {
    article: Object
  },
  computed: {
    dictionary: function() {
      return this.article.dictionary || this.$route.params.lang
    }
  },
  components: {
    DefElement,
    Definition,
    Header
  },
  methods: {
    article_link_click: function(item) {
      this.$emit('article-click', item)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
article {
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  background-color: #FFFFFF;
  box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.5);
}

h3 {
  margin: 40px 0 0;
  color: #560027;
}

a {
  color: #560027;
}

li {
  padding-bottom: 4px;
}

li.level1.definition {
  list-style: upper-alpha;
}

li.level2.definition {
  list-style: decimal;
}

li.level3.definition {
  list-style: lower-alpha;
}

li.sub_article > ul {
  padding-left: 0px;
}

li.definition.level1, li.definition.level2 {
  padding-bottom: 2em;
}

::marker {
  font-weight: bold;
  color: #560027;
}

ol > li:only-child.level1, li:only-child.level2, li:only-child.level3 {
  list-style: none;
}

li:only-child.level1 > ol {
  padding-left: 0px;
}

ul, ol {
  padding-left: 20px;
}

ul li {
  list-style:none;
}

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

</style>