監視プロパティでテキストボックスを監視しておき、キーワードが入力された時点でQiitaのAPIを呼び出して検索結果を取得するサンプルです。
キーワードが入力される度にAPIを呼び出すと大変なので、一定時間（とりあえず1秒）操作が止まった時点でAPIを呼び出すため、lodashのdebounceを利用してます。
サンプルはこちら。
以下、ソース。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Qiita検索</title>
<style>
[v-cloak] { display: none; }
</style>
</head>
<body>
<div id="app">
<p>
検索キーワード：<input type="text" v-model="keyword">
</p>
<p v-cloak>
{{ message }}
</p>
<ul>
<li v-for="item in items" v-cloak>
<a v-bind:href="item.url" target="_blank">{{ item.title }}</a> いいね数: {{ item.likes_count }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
JavaScript
var app = new Vue({
el: '#app',
data: {
items: null,
keyword: '',
message: '',
},
watch: {
keyword: function(newKeyword, oldKeyword){
// lodash.debounceを利用してAPI呼び出しの負荷軽減
this.message = '入力が終わるのを待ってます･･･';
this.debouncedGetAnswer();
}
},
created: function() {
// lodash.debounce によって、1秒間操作が無くなった時点でAPI呼び出し実施
// キー入力の度にAPIを呼び出すような負荷をかけないため
this.debouncedGetAnswer = _.debounce(this.getAnswer, 1000);
},
methods: {
getAnswer: function(){
// キーワードが空の場合はメッセージと検索結果を空にして処理終了
if( this.keyword === ''){
this.items = null;
this.message = '';
return;
}
this.message = 'loading...';
var vm = this;
var params = { page:1, per_page: 20, query: this.keyword };
axios.get('https://qiita.com/api/v2/items', {params})
.then(function(response){
console.log(response);
vm.items = response.data;
})
.catch(function(error){
vm.message = 'Error!' + error;
})
.finally(function(){
vm.message = '';
})
}
}
})
コメント