田無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>