我正在使用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>