【Vue.js入門】13_Qiita記事検索アプリを作ってみる
Vue.js入門第1３回。今回は今までの内容でQiitaの記事を検索するアプリを作成してみます。
Contents
Qiita記事検索アプリについて
入力されたキーワードを元にQiitaから記事を検索するアプリです。
ソースコード
Javascript
dataプロパティに検索結果を保持するitems、検索キーワードを保持するkeywordプロパティ、ロード中や文字入力中などのメッセージを保持するmessageプロパティを定義しています。
createdプロパティはVueインスタンス生成後に呼び出されますが、ここでdebounceSearchという検索関数を作成し、lodashという外部のライブラリ_.debounceを使って１秒後にsearchメソッドを呼び出すようにしています。
watchプロパティでkeywordを監視して、変化があったら（つまり入力中）だったらmessageに「typing..」と表示して、上述のdebounceSearch関数を呼び出しています。debounceによって最後に呼び出されてから１秒後に検索が走るようにしています。
methodsプロパティに実際に検索するsearchメソッドを定義しています。keywordが空であればitemsとmessageの初期化を行いreturnで終了しています。空でなければQiitaAPIを呼び出してレスポンスをitemsプロパティに設定しています。
HTML
検索テキストボックスとしてkeywordを双方向データバインディングさせています。
v-forディレクティブで検索結果の一覧（記事タイトルといいね数）を表示しています。