Vue model

by tmhr1850

HTML

<div id="app">
  <h2>
    Bitcoin Price
  </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="(rate, currency) in bpi">
          {{ currency }} : {{ rate.rate_float | currencyDecimal }}
        </li>
      </ul>
    </div>
  </section>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>

CSS

[v-cloak] {
  display: none;
}

JavaScript

new Vue({
	el: "#app",
  data: {
  	bpi: null,
    hasError: false,
    loading: true
  },
  mounted() {
  axios.get('https://api.coindesk.com/v1/bpi/currentprice.jso')
    .then((res) => {
    	this.bpi = res.data.bpi
      console.log(this.bpi)
    })
    .catch((error) =>{
    	console.log(error)
      this.hasError = true
    })
    .finally(() => {
    	this.loading = false
    })
  },
  filters: {
  	currencyDecimal(value) {
    	return value.toFixed(2)
    }
  }
})