vue.js入門_13_APIを使ってQiitaの記事を取得する

by s9iwork

HTML

<div id="app">
  <p>
    <input type="text" v-model:value="keyword">
  </p>
  <p>
    {{ message }}
  </p>
  <ul>
    <li v-for="item in items">
      <a v-bind:href="item.url" target="_blank">{{ item.title }}</a> likes: {{ item.likes_count }}
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.14/lodash.min.js"></script>

JavaScript

new Vue({
  el: '#app',
  data: {
    items: null,
    keyword: '',
    message: '',
  },
  created: function() {
    this.debounceSearch = _.debounce(this.search, 1000)
  },
  watch: {
    keyword: function(newKeyword, oldKeyword) {
    	this.message = 'typing...'
      this.debounceSearch()
    },
  },
  methods: {
    search: function() {
      if (this.keyword === '') {
        this.items = null
        this.message = ''
        return
      }

      this.message = 'Loading..'

      let params = {
        page: 1,
        per_page: 20,
        query: this.keyword
      }
      axios.get('https://qiita.com/api/v2/items', {
        params
      }).then(function(response) {
        this.items = response.data
      }.bind(this)).catch(function(error) {
        this.message = 'Error!' * error
      }.bind(this)).finally(function() {
        this.message = ''
      }.bind(this))
    },
  }
})