Issue Summary
I’m developing an application using Vue.js that features a typeahead component created with vue-typeahead, and I’m making axios requests to the New York Times API for top stories. The idea is to allow users to type in search terms and present matching story titles.
However, I keep encountering a 414 error which states: 414 (Request-URI Too Large). I suspect this happens because I’m attempting to fetch too much data in a single request.
Code Example
Here’s my Typeahead component:
<template>
<div class="typeahead">
<header>
<h1>Typeahead Feature</h1>
<h4>Vue.js typeahead using NYT's top stories API</h4>
</header>
<section>
<i class="loader" v-if="loading"></i>
<input type="text"
v-model="searchTerm"
placeholder="Type to search..."
@input="fetchResults" />
<ul v-if="results.length">
<li v-for="(result, index) in results" :key="index">
<h3>{{ result.headline }}</h3>
<p>{{ result.summary }}</p>
</li>
</ul>
<div v-if="noResults">No results found</div>
</section>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
searchTerm: '',
results: [],
loading: false,
noResults: false
}
},
methods: {
fetchResults() {
this.loading = true;
axios.get(`https://api.nytimes.com/svc/topstories/v2/home.json?api-key=YOUR_API_KEY&query=${this.searchTerm}`)
.then(response => {
this.results = response.data.results;
this.noResults = this.results.length === 0;
this.loading = false;
})
.catch(err => {
console.error(err);
this.loading = false;
});
}
}
}
</script>
How can I resolve this error effectively?