【Vue.js】axiosを使って取得したデータをバインドして描画する
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-for
は v-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リクエストを投げて取得したデータを突っ込めばいい。