9週目(4/8~)クエリパラメータとは...
前週の宿題
①news/newに登録フォームを作り、firebaseに保存
②newsに登録結果の一覧表示(firebaseからデータを読み込む)
③firebaseのデータベースを削除する
④firebaseのデータベースを編集できる
⑤報告を逐一する
自力でできたこと(所要時間15時間)
firebaseのデータベースにデータを保存し、それを読み込む。表示まではできず、そこから編集したり、削除したりするのも出来ませんでした。
学んだこと
scriptの表記の仕方/idの活用方法
・読み込んだデータベースを一覧表示させ(scriptの表記の仕方)、各タイトルから、詳細な情報の読み取りに移る(idの活用方法)。
<template>
<div>
<nuxt-link to="/news/new">news 追加</nuxt-link>
<ul>
<li v-for="item in news" :key="item">
<nuxt-link :to="`/news/${item.id}`">{{ item.title }}</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
import { db } from '~/plugins/firebase.js'
export default {
async asyncData() {
const querySnapshot = await db.collection('news').get()
const news = []
querySnapshot.forEach((doc) => {
const item = Object.assign({ id: doc.id }, doc.data())
news.push(item)
})
return {
news
}
}
}
</script>
クエリパラメータとは。
<nuxt-link to="/next?pageName=next" > Go to Next</nuxt-link>
nextをパラメータ。?以降の部分を、クエリと呼ぶ。この場合のクエリパラメーターはpageName
データを受け取る側では <template> ブロック内で $route.query.パラメータ名 によってデータを取得できます。
今回のような、IDごとにURLページ名が変わる動的なパラメータの場合、
_id/index.vue 内の <template> ブロックから参照するには $route.params.パラメータ名 で指定します。
<template>
<div>
ID is {{ $route.params.id }}
</div>
</template>
・NUXT JSのコンテキストについて
今回のように、asyncData内でparamsを使う場合は、doc(this.$route.params.id)としなくても、doc(params.id)とasync asyncData({ params })に記述しておけば、この中ではparamsを使いますと宣言できる。らしい。
<script>
import { db } from '~/plugins/firebase.js'
export default {
async asyncData({ params }) {
const docRef = db.collection('news').doc(params.id)
const doc = await docRef.get()
console.log(doc)
console.log(doc.data())
console.log(doc.id)
}
}
</script>
・どんな仕組みで動いているのか調べる方法
ドキュメントを見ながら、consoleされたものをconsole.log(doc)し、順番に何が読み込まれるのか確認する方法。
console.log(doc)
console.log(doc.data())
console.log(doc.id)
console内でクリックしてtrueとなっているのものは、データあるよ。ということ。
今週の宿題
①意味を調べる。なぜ、この書き方をしているのか。
↓JavaScriptを勉強している人は、気になる記述の仕方らしい。
const { title, description } = doc.data()
objectショートハンド
return {
news
}
②先週の宿題の続き
編集・削除でfirebase内のデータをupdate/destroyができるようにする
③アプリのアイデア用意。
firebaseの勉強で学んだことで、できそうなアプリのアイデアを用意する。今は簡単に「議事録」ができるアプリにしようかなと思ってます。
もし、こんなアイディアあるけどどう?っていうのが、もしあれば教えてください。
今後の学習予定
10週目〜:アプリ作成
13週目〜:ポートフォリオ作成
サポート頂けるとモチベーション上がります!僕もますます頑張るので、一緒に頑張りましょう!!