田無rb#6 ~Nuxt.js firebase連携②~

「Vue.js&Nuxt.js超入門」Chapter6の続きをやっていきます

FirebaseでJSONデータを作成して、そこにブラウザからアクセスできることまでを前回やったので、続いてはNuxt.jsアプリからのアクセスを試してみる

変数urlに作成したJSONデータを渡すようにして、asyncDataを使ってコンポーネント生成時に呼び出すようにしている

<script>
const axios = require('axios')

let url = "https://[プロジェクトID].firebaseio.com/person.json"

export default {
  ...
  asyncData: async function() {
    let result = await axios.get(url);
    return { json_data: result.data };
  }
}
</script>

テンプレートから、json_dataの値をリスト形式で表示する

🤔json_dataはオブジェクトだからキーと値があるけど、v-forで回すときは(data, key)のようにkeyが後ろに来るらしい

<template>
  ...
  <ul v-for="(data, key) in json_data">
    <li>{{data.name}} [{{key}}]</li>
  </ul>
  ...
</template>