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をはじめよう - クエリパラメータやパスパラメータを使ってデータを渡すNuxt.jsをはじめよう - クエリパラメータやパスパラメータを使ってデータを渡す - そうなんでげすNuxt.jsをはじめよう - クエリパラメータやパスパラメータを使ってデータを渡す

・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>

nuxtjs.org

・どんな仕組みで動いているのか調べる方法

ドキュメントを見ながら、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週目〜：ポートフォリオ作成