SearchResults.vue

<template>
  <section id="search_results">
    <h2 v-if="hits.length">Søkeresultater</h2>
    <div class="flex-container">
      <ul class="hits" v-if="results_bob.length">
        <li><h4>Bokmål</h4></li>
        <Preview v-for="(result, index) in results_bob" :key="index" :searchHit="result" @click.native="article_link_click(result)">
        </Preview>
      </ul>
      <ul class="hits" v-if="results_nob.length">
        <li><h4>Nynorsk</h4></li>
        <Preview v-for="(result, index) in results_nob" :key="index" :searchHit="result" @click.native="article_link_click(result)">
        </Preview>
      </ul>
      <ul class="hits" v-if="results_norsk.length">
        <li><h4>Norsk Ordbok</h4></li>
        <Preview v-for="(result, index) in results_norsk" :key="index" :searchHit="result" @click.native="article_link_click(result)">
        </Preview>
      </ul>
    </div>
  </section>
</template>

<script>
import Preview from './Preview.vue'

export default {
  name: 'SearchResults',
  props: {
    hits: Array,
    lang: String
  },
  computed: {
    results_bob: function(){
      return this.hits.filter(hit => hit.dictionary == 'bob')
    },
    results_nob: function(){
      return this.hits.filter(hit => hit.dictionary == 'nob')
    },
    results_norsk: function(){
      return this.hits.filter(hit => hit.dictionary == 'norsk_ordbok')
    }
  },
  methods: {
    article_link_click: function(result) {
      this.$router.push('/' + result.dictionary + '/' + result.article_id)
      this.$emit('search-hit-click', result)
    }
  },
  components: {
    Preview
  }
}

</script>
<style>
  h2 {
    color: #560027;
  }

  .hits  .preview {
    margin: 10px;
    padding: 5px;
    cursor: pointer;
  }

  .hits  .preview h4 {
    color: #560027;
    text-decoration: underline;
  }

  .hits {
    margin-top:0px;
  }

  .flex-container {
    display: flex;
  }

  .flex-container > ul {
    padding: 0px;
  }

  .flex-container  h4 {
    margin: 0px;
  }
</style>