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)
    }
  }

})