App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div class="">
      <form class="" action="search" method="get">
        <input placeholder="Søk..." name="q" />
        <select class="" name="lang">
          <option value="nob">Bokmål</option>
          <option value="nno">Nynorsk</option>
        </select>
        <input type="submit" name="" value="Yay!">
      </form>
    </div>
    <img id="spinner" :class="waiting ? 'show' : 'hide'" src="./assets/spinner.gif" alt="" />
    <SearchResults :hits="search_results" :lang="query_lang" />
    <Article :article="article" />
  </div>
</template>

<script>
import axios from "axios"
import Article from './components/Article.vue'
import SearchResults from './components/SearchResults.vue'
//import Autocomplete from '@trevoreyre/autocomplete-vue'
//import '@trevoreyre/autocomplete-vue/dist/style.css'

var api_endpoint = 'https://ordbok-dev.aws.uib.no/api/dict/'

export default {
  name: 'app',
  data: function() {
    let params = new URLSearchParams(window.location.search.substring(1))
    let path = window.location.href.split("/")
    return {
      article_id: parseInt(path.pop()),
      search_query: params.get('q'),
      query_lang: params.get('lang'),
      path_lang: path.pop(),
      search_results: [],
      waiting: true,
      article: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}},
      /*search: function(q) {
        return new Promise(resolve => {
          return axios.post(api_endpoint + '_search/',
                            {
                                "suggest": {
                                  "suggest" : {
                                    "prefix" : q,
                                    "completion" : {
                                      "field" : "suggest"
                                    }
                                  }
                                }
                              }).then(function(response) {
                                let hits = response.data.suggest.suggest[0].options
                                if(q.length) hits = hits.concat({q: q})
                                resolve(hits)
                              })
        })
      },*/
      result_view: function(result) {
        if (result._source)
          return result._source.lemmas.map(x => x.word).join(', ')
        else
          return 'Alle søkeresultater...'
      }
    }
  },
  components: {
    Article,
    //Autocomplete,
    SearchResults
  },
  methods: {
    select_result: function(event) {
      if(event._source){
        this.search_results = []
        this.article = event._source
      }else{
        window.location.href="search?q=" + event.q
      }
    }
  },
  mounted: function(){
    var self = this;
    if(this.search_query) {
      axios.get(api_endpoint + self.query_lang + '/article' + '?expand_lemmas=true&lemma_text=' + self.search_query)
      .then(function(response){
        self.search_results = response.data
        self.waiting = false
      })
    }
    else if(this.article_id)
    {
      axios.get(api_endpoint + self.path_lang + '/article' + '/' + self.article_id + '?expand_lemmas=true&expand_refs=true')
      .then(function(response){
        self.article = response.data
        self.waiting = false
      })
    }
    else {
      this.waiting = false
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  margin-left: 30%;
  margin-right: 10%;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.autocomplete {
  width: 25em;
}
</style>