As I navigate through my Vue learning curve, I've observed that the input field triggers an AJAX call (using axios) to YouTube with every keystroke entered. This means that even a single letter prompts a search query to be executed on the YouTube search API. While this method may work perfectly when searching a database by keywords, it seems inefficient for APIs like YouTube videos. It would be more optimal if the API call waited for the user to complete their search query before executing. Is there a directive or any other approach to ensure that the API call waits for the user to finish entering their search query before making the request to YouTube? By the way, during testing, I noticed that I reached my 1,000 limit on the YouTube API within just one hour.
This is the App.vue
<template>
<SearchBar @emitTermSearch="onTermSearch"></SearchBar>
<VideoList :videos="videos"></VideoList>
</template>
<script>
import axios from "axios";
import SearchBar from "./components/SearchBar";
const API_KEY = "hidden";
export default {
name: "App",
components: {
SearchBar
},
data() {
return {
videos: []
};
},
methods: {
onTermSearch(emitTermSearch) {
axios
.get("https://www.googleapis.com/youtube/v3/search", {
params: {
key: API_KEY,
type: "video",
part: "snippet",
maxResults: 2,
order: "date",
q: emitTermSearch
}
}.then(response => {
this.videos = response.data.items;
}).catch(err => {
console.log(err);
});
}
}
};
</script>
This is the SearcBar.vue
<template>
<h1>Please Search</h1>
<div id="searchbar">
<input @input="onInput" />
</div>
</template>
<script>
export default {
name: "SearchBar",
methods: {
onInput(event) {
this.$emit("emitTermSearch", event.target.value);
}
}
};
</script>