Preview.vue

<template>
  <li>
    <div class="preview">
      <h4 v-html="previewHeader"></h4>
      <h5 v-if="searchHit.body">{{group_list}}</h5>
      {{previewText.substring(0, 40) + (previewText ? '...' : '')}}
    </div>
  </li>
</template>

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

let labels = {
  'bob': 'Bokmål',
  'nob': 'Nynorsk',
  'norsk_ordbok': 'Norsk Ordbok'
}

export default {
  name: 'Preview',
  props: {
    searchHit: Object
  },
  computed: {
    previewHeader: function(){
      return this.searchHit.match && this.searchHit.match + " (" + labels[this.searchHit.dictionary] + ")" ||
            (this.searchHit.lemmas && this.searchHit.lemmas.map(l => `${l.lemma}`) || []).join(',') ||
            "Alle søkeresultater..."
    },
    previewText: function(){
      if (! this.searchHit.body) return ''
      let element = this.searchHit.body.definitions[0] || ''
      while (element.type_ == 'definition') element = element.elements[0]
      if (element.type_ == 'example') {
        element = element.quote
      } else if (! element.content){
        element = {content: '', items: []}
      }

      let lang = this.searchHit.dictionary

      let replacements = element.items.map(item => item.text ||
                                           item.string ||
                                           entities[lang][item.id] ||
                                           languages[lang][item.id] ||
                                           item.id ||
                                           item.lemmas[0].lemma).reverse()

      let replacement = () => replacements.pop()

      return element.content.replace(/\$/gi, replacement)
    },
    group_list: function() {
      return helpers.group_list(this.searchHit.lemmas)
    }
  },
  components: {

  }
}

</script>
<style scoped>
h4, h5 {
    padding: 0px;
    margin: 0px;
}
</style>