Vue.jsでAPIからデータをasyncでFetchして使う方法

Vue.jsでAPIからデータをasyncでFetchしてそれをdataにセットする方法を紹介します。とても簡単で、下記のような3ステップで終わりです。

あらかじめからのデータ（今回はitemとします。）を用意します。
async mountを使い、awaitを使ってデータをfetchします。
fetchしたデータをthis.itemというようにあらかじめ用意したデータに入れます

CDNを利用したコードのサンプルはこちらになります。 HTMLも書いているので、これを丸ごとsample.htmlのようなHTMLに保存して、ブラウザで開けば動いていることがわかると思います。

<html>
  <head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  </head>

  <body>
    <div id='app'>
      {{item}}
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: '#app',
      data: function() {
        return {
          item: []
        }
      },
      async mounted() {
        const data = await fetch('https://api.coindesk.com/v1/bpi/currentprice.json')
        const json = await data.json()
        this.items = json
      }
    })
  </script>

</html>

参考: using-axios-to-consume-apis