DefElement.vue

<template>
  <li :class="body.type">
    <div>
      <span v-for="item in assemble_text" :class="item.type" v-html="item.html"></span>
    </div>
  </li>
</template>

<script>
import entities from '../utils/entities.js'
import languages from '../utils/languages.js'

export default {
  name: 'DefElement',
  props: {
    body: Object
  },
  computed: {
    unparsed: function(){
      return this.body.items.map(
        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.id) return {type: item.type, html: entities[item.id] || languages[item.id] || item.id}
          else return {type: item.type || 'plain', html: item}
        }
      )
    },
    assemble_text: function(){
      var old_parts = this.body.content.split(/(\$)/)
      var text_items = this.unparsed.slice(0).reverse()
      var new_parts = []
      old_parts.forEach(function(item){
        if(item == '$') {
          new_parts.push(text_items.pop())
        } else if (item.length) {
          new_parts.push({type: 'plain', html: item})
        }
      })
      return new_parts
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
span.usage {
  font-style: italic;
}

span.language {
  font-weight: bold;
}
</style>