Vue JS 学習記録04

#Bitcoinの表示

[API」の実装

CoinDesk API

[chrome拡張機能:jsonview] jsonデータを成形した状態で表示してくれる
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc/related?hl=ja

[axiosを実装] https://www.jsdelivr.com/package/npm/axios?path=dist

[HTML]

bitcoinの価格を取得・表示

  <!--(8)視覚的にエラー内容を表示
  エラーがあれば「Error」と表示-->
  <section v-if="hasError">Error</section>

  <!--(8)視覚的にエラー内容を表示
  エラーがなければbitcoinのレートを表示-->
  <section v-else>
    <!--(9)ローディングを実装-->
    <div v-if="loading">
      Loading...
    </div>
    <div v-else>
      <!--(6)マスタッシュタグのちらつきを防止-->
      <ul v-cloak>
        <!--(3)▼rate:bitcoin価格、currencyには通貨が入っている(USD、GBP.EUR)-->
        <li v-for="(rate, currency) in bpi">
          <!--(4)小数点以下を2桁に-->
          {{currency}}:{{rate.rate_float | currencyDecimal}}
        </li>
      </ul>
    </div>



  </section>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>

[js] var app = new Vue({
el: '#app',
data: {
bpi: null,
//(8)視覚的にエラー内容を表示
hasError: false,
//(9)ローディングを実装
loading: true
},
mounted: function() {
//(1)apiの実装
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(function(response) {
// console.log(response.data.bpi)
//console.log(response.data.bpi.USD.rate_float)
this.bpi = response.data.bpi
}.bind(this))

  //(2)通信エラーの補足を実装
  .catch(function(error) {
    console.log(error)
    //(8)視覚的にエラー内容を表示
    this.hasError = true
  }.bind(this))

  //(9)ローディングを実装
  //最初にローディングを実行してすべての処理を終えるとローディング処理をfalseにセットする
  .finally(function() {
    this.loading = false
  }.bind(this))

},
filters: {
currencyDecimal(value) {
//(4)数を固定小数点数値を用いて表示する設定
return value.toFixed(2)
}
}

})

[CSS] /* (6)マスタッシュタグのちらつきを防止 */

[v-cloak] {
display: none;
}