JSFiddle - React, Tailwind, and code Playground

by techyankee

HTML

<div id="app">
  <h2>仮想通貨価格</h2>
  <section v-if="hasError">
    Error.
  </section>
  
  <section v-else>
    <div v-if="loading">
      Loading.....
    </div>
    <div v-else>
      <ul v-cloak>
        <li v-for="(currency, currencies) in bpi">
          {{ currency.name }} : {{ currency.current_price | currencyDeciaml }}円
        </li>
      </ul>
    </div>

  </section>

</div>



<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>

CSS

[v-cloak] {
  display: none;
}

JavaScript

var app = new Vue({
    el: '#app',
    data: {
    	bpi: null,
      hasError: false,
      loading: true
  },
  mounted: function() {
  	axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=jpy').then(function(response){
  	  // console.log(response)
  	  this.bpi = response.data
  	}.bind(this))
    .catch(function(error) {
    	console.log(error)
      this.hasError = true
    }.bind(this))
    
    .finally(function() {
    	this.loading = false
    }.bind(this))
  },
  
  filters: {
  	currencyDeciaml(value) {
    	return value.toFixed(2)
    }
  }

})