qiita apiを叩く。その4

概要

javascriptで、qiita apiを叩いてみた。
searchで、取得してみた。

サンプルコード

var app = new Vue({ 
  el: '#app', 
  data: { 
    items: null, 
    keyword: '', 
    message: '' 
  }, 
  watch: { 
    keyword: function(newKeyword, oldKeyword) { 
      this.message = 'waiting for you stop typing...' 
      this.debouncedGetAnswer() 
    } 
  }, 
  created: function() { 
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 1000) 
  }, 
  methods: { 
    getAnswer: function() { 
      if (this.keyword === '')
      { 
        this.items = null 
        this.message = '' 
        return 
      } 
      this.message = 'Loadng...' 
      var vm = this 
      var params = { 
        page: 1, 
        per_page: 10, 
        query: this.keyword
      } 
      axios.get('https://qiita.com/api/v2/items', {
        params
      }).then(function(response) { 
        vm.items = response.data 
      }).catch(function(error) { 
        vm.messae = 'Error!' + error 
      }).finally(function() { 
        vm.message = '' 
      }) 
    } 
  } 
}) 

成果物

以上。