Vueでコインの値段を取得

<template>
  <div class="wrap">${{ price }}</div>
</template>

<script>
import axios from "axios";
export default {
  name: "HelloWorld",
  // 出力する値を定義
  data() {
    return {
      price: "-",
    };
  },
  mounted() {
    // 非同期処理
    axios
      // apiをコール
      .get("https://api.coindesk.com/v1/bpi/currentprice.json")
      // 成功したら
      .then((response) => {
        // dataで定義したthis.priceへ値段を代入
        this.price = response.data.bpi.USD.rate;
      })
      // 失敗したら
      .catch(
        // 値段を非表示
        (this.price = "-")
      );
  },
};
</script>