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>
        <li  class="article_container" v-for="(result, index) in results_bob" :key="index">
          <Article  :article="result" @article-click="article_link_click">
          </Article>
        </li>
      </ul>
      <ul class="hits" v-if="results_nob.length">
        <li><h4>Nynorsk</h4></li>
        <li class="article_container" v-for="(result, index) in results_nob" :key="index">
          <Article :article="result" @article-click="article_link_click">
          </Article>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import Article from './Article.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')
    }
  },
  methods: {
    article_link_click: function(item) {
      this.$emit('article-click', item)
    }
  },
  components: {
    Article
  }
}

</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;
    margin-left: 20px;
    margin-right: 20px;
  }

  .flex-container {
    display: flex;
  }

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

  .flex-container  h4 {
    margin: 0px;
  }

  li.article_container {
    border-bottom: solid 2px #560027;
  }
</style>