Vue.jsでQiita検索APIを使ってみる

Vue.js
スポンサーリンク

監視プロパティでテキストボックスを監視しておき、キーワードが入力された時点で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 = '';
          })

      }
    }
})

コメント