使用vue-typeahead + nyt api出错414错误

时间:2018-01-04 14:43:14

标签: javascript json vue.js vuejs2 typeahead

我正在使用vue-typeahead使用Vue.js为基本功能构建一个预先打印的应用程序。我正在用axios打电话给纽约时报的顶级故事API。用户应输入字符,此时应显示标题与这些字母匹配的故事。

我目前遇到414错误:414(Request-URI太大) - 我认为这是因为我正在尝试一次加载f-ton信息。

我该如何做到这一点?

Typeahead.vue

<template>
  <main class="typeahead">
    <header>
      <div class="container header__text">
        <h1>Typeahead</h1>
        <h4>A Vue.js typeahead component using the New York Times 'top stories' API</h4>
      </div>
    </header>
    <section class="container typeahead__section">
      <i class="fa fa-spinner fa-spin" v-if="loading"></i>
      <template v-else>
        <i class="fa fa-search" v-show="isEmpty"></i>
        <i class="fa fa-times" v-show="isDirty" @click="reset"></i>
      </template>

      <input type="text"
        class="typeahead__input"
        placeholder="Start typing to find a person"
        autocomplete="off"
        v-model="query"
        @keydown.down="down"
        @keydown.up="up"
        @keydown.enter="hit"
        @keydown.esc="reset"
        @blur="reset"
        @input="update"/>

      <ul class="typeahead__results" v-show="hasItems">
        <li v-for="(item, $item) in items" :class="'typeahead__block' + activeClass($item)" @mousedown="hit" @mousemove="setActive($item)">
          <div class="typeahead__content">
            <div class="typeahead__content--name" v-text="item.title"></div>
            <div class="typeahead__content--abstract" v-text="item.abstract"></div>
            <div class="typeahead__content--url" v-text="item.url"></div>
          </div>
        </li>
      </ul>

      <div class="typeahead__no-results" v-show="isDirty && !items.length">
        <span>No results</span>
      </div>
    </section>
  </main>
</template>

<script>
import axios from 'axios'
import VueTypeahead from 'vue-typeahead'

export default {
  extends: VueTypeahead,
  data () {
    return {
      minChars: 3,
      src: 'https://api.nytimes.com/svc/topstories/v2/home.json?api-key=0746eeb7e32c4e6b981da53229e27ddb',
      data: {}
    }
  },
  mounted() {
    axios.get('https://api.nytimes.com/svc/topstories/v2/home.json?api-key=0746eeb7e32c4e6b981da53229e27ddb').then(
      response => {
        this.data = response.data.results
      }
    )
  },
  methods: {
    onHit (item) {
      window.location.href = item.url
    }
  }
}
</script>

0 个答案:

没有答案