【Vue.js】axiosを使って取得したデータをバインドして描画する

github.com

axiosをCDNで読み込んでおく。
v-on ディレクティブを使ってクリックイベントをハンドリングする。
省略記法を使っているので @click となっている。
また v-for ディレクティブを使って取得したデータを描画できるようにしておく。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
</head>
<body>
    <div id="app">
      <button @click="request">Qiita記事取得</button>
      <ul >
        <li v-for="item in items">{{ item.title }}</li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

それにしても、ちょっと前まで v-forv-repeat だったり、Vueは廃止・変更されたディレクティブが多いな。。

var vm = new Vue({
  el: '#app',
  data: {
    items: [],
  },
  methods: {
    request: function (e) {
      axios
        .get('https://qiita.com/api/v2/items?page=1&per_page=20')
        .then(function (res) {
          vm.items = res.data;
        })
        .catch(function (err) {
          console.log(err);
        });
    }
  }
});

methods オブジェクトに request メソッドを用意しておく。
axiosでGETリクエストを投げて取得したデータを突っ込めばいい。