SearchResults.vue

<template>
  <section>
    <h2 v-if="hits.length">Søkeresultater</h2>
    <div class="flex-container">
      <ul class="hits" v-if="results_nob.length">
        <li><h4>Bokmål</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_nno.length">
        <li><h4>Nynorsk</h4></li>
        <Preview v-for="(result, index) in results_nno" :key="index" :searchHit="result" @click.native="article_link_click(result)">
        </Preview>
      </ul>
    </div>
  </section>
</template>

<script>
import helpers from '../utils/helpers.js'
import Preview from './Preview.vue'

export default {
  name: 'SearchResults',
  props: {
    hits: Array,
    lang: String
  },
  computed: {
    results_nob: function(){
      return this.hits.filter(hit => hit._index == 'nob')
    },
    results_nno: function(){
      return this.hits.filter(hit => hit._index == 'nno')
    }
  },
  methods: {
    article_link_click: function(result) {
      this.$router.push('/' + result._index + '/' + result._id)
      this.$emit('search-hit-click', result._source)
    }
  },
  components: {
    Preview
  }
}

</script>
<style>
  .hits  .preview {
    margin: 10px;
    padding: 5px;
    cursor: pointer;
  }

  .hits  .preview h4 {
    color: rgb(0, 0, 238);
    text-decoration: underline;
  }

  .hits {
    margin-top:0px;
  }

  .flex-container {
    display: flex;
  }

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

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