la til uttale

src/components/Article.vue

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

src/components/DefElement.vue

 <template>
   <li :class="body.type">
-    <div>
-      <span v-for="item in assemble_text" :class="item.type" v-html="item.html"></span>
-    </div>
+    <span v-for="item in assemble_text" :class="item.type" v-html="item.html"></span>
   </li>
 </template>
 
@@ -21,6 +19,7 @@ export default {
         function(item){
           if      (item.type == 'usage') return {type: item.type, html: item.text}
           else if (item.type == 'article_ref') return {type: item.type, html: `<a href="${item.article_id}${item.definition_id ? '#def'+item.definition_id : ''}">${item.lemmas.join(',')}</a>`}
+          else if (item.type == 'pronounciation') return {type: item.type, html: item.string}
           else if (item.id) return {type: item.type, html: entities[item.id] || languages[item.id] || item.id}
           else return {type: item.type || 'plain', html: item}
         }
@@ -45,11 +44,13 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-span.usage {
+span.usage, span.pronounciation {
   font-style: italic;
 }
 
 span.language {
   font-weight: bold;
 }
+
+
 </style>