Raw
search.js
// Component
Vue.component('post-card', {
props: ['post'],
template: ''
})
var app = new Vue({
el: '#search-app',
data: {
q: "",
searchResult: ""
},
watch: {
q: function () {
console.log(this.q);
this.debouncedDoSearch()
}
},
created: function () {
// _.debounce is a function provided by lodash to limit how
// often a particularly expensive operation can be run.
// In this case, we want to limit how often we access
// yesno.wtf/api, waiting until the user has completely
// finished typing before making the ajax request. To learn
// more about the _.debounce function (and its cousin
// _.throttle), visit: https://lodash.com/docs#debounce
this.debouncedDoSearch = _.debounce(this.doSearch, 500)
},
methods: {
doSearch: function(){
var app = this
axios.get('https://www.googleapis.com/customsearch/v1?key=YOUR_API_KEY&cx=CSE_ID&q='+this.q)
.then(function (response) {
app.searchResult = response.data;
console.log(app.searchResult);
})
.catch(function (error) {
console.log(error);
})
}
}
});