【Vuejs】axiosを使ってみる #Vue.js

公式ドキュメントを参考に試してみました。

公式ドキュメント#基本的な例
https://jp.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BE%8B

スタブ

スタブを用意するのが面倒なので公式ドキュメントにも載っている以下を利用します。
https://api.coindesk.com/v1/bpi/currentprice.json
こんな感じのJSONが返ってきます。

作ったもの

sample.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>

<body>
    <style>
        .bpi.header {
            background-color: beige;
        }
        .bpi.even {
            background-color: azure;
        }
        .bpi.odd {
            background-color: beige;
        }
    </style>

    <div id="app">
        <div id="rawdata">
            <strong>rawdata :</strong><br>{{coindesk}}
        </div>
        <br>
        <div id="update_time">
            <strong>update_time :</strong>{{coindesk.time.updated}}
        </div>
        <div id="desc">
            <strong>disclaimer :</strong>
            {{coindesk.disclaimer}}
        </div>
        <div id="chartName">
            <strong>chartName :</strong>{{coindesk.chartName}}
        </div>

        <table>
            <tr class="bpi header">
                <th>No.</th>
                <th>code</th>
                <th>symbol</th>
                <th>rate</th>
                <th>description</th>
                <th>rate_float</th>
            </tr>
            <tr v-for="(e,key,index) in coindesk.bpi" v-bind:class="[index % 2 == 0 ? 'even' : 'odd']" class="bpi">
                <td>{{index+1}}</td>
                <td>{{e.code}}</td>
                <td>{{decode(e.symbol)}}</td>
                <td>{{e.rate}}</td>
                <td>{{e.description}}</td>
                <td>{{e.rate_float}}</td>
            </tr>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                coindesk: null,
            },
            mounted() {
                axios
                    .get('https://api.coindesk.com/v1/bpi/currentprice.json')
                    //.then(response => (console.log( response.data)))
                    .then(response => (this.coindesk = response.data))
            },
            methods: {
                decode: function (str) {
                    return str;// TODO デコード結果を返したい
                }
            }
        })
    </script>
</body>
</html>

実行結果

ポイント

配列ではなくオブジェクトをv-forする場合はkey,indexの2つ必要だった。
公式ドキュメントだとresponse => (this.info = response)となっているけどAPI叩いた時のレスポンスはresponse => (this.info = response.data)の中にある。
ライフサイクルはmountedでなくてもcreatedでも多分OK。