今日はチャットルームへ移動できるようにし、メッセージを保存できるようにします。
・チャットルームの移動
・メッセージの保存
slackの昨日の重要な部分ですので、きちんと理解しながら取り組んでいきたいと思います。
今日の内容
チャットルームの移動
まずはチャンネル名をクリックして、チャットルームに移動できるようにしていきます。
pages/channels/_id.vueというファイルを作成します。これはpages/channels/チャンネルIDというようにチャンネルごとにURLを変更させるためです。
_id.vueにはindex.vueの内容をコピーします。
<template>
<div class="container">
<div class="chats-layout">
<messages />
</div>
<div class="input-layout">
<chat-form />
</div>
</div>
</template>
<script>
import Messages from '~/components/Messages.vue'
import ChatForm from '~/components/ChatForm.vue'
export default {
components: {
Messages,
ChatForm
}
}
</script>
<style scoped>
.container {
height: 100%;
}
.chats-layout {
overflow: scroll;
height: 90%;
}
.input-layout {
height: 10%;
}
</style>そしたら、index.vueのページを下記のように消しておきます。
<template>
<div class="container">
</div>
</template>次に、チャンネルの部分をリンクにします。
link を生成するには nuxt-link というのを使います。
そして下記のように変更していきます。
<template>
<div class="app-layout">
<div class="sidebar">
<p>チャンネル一覧</p>
<p v-for="channel in channels" :key="channel.name">
<nuxt-link :to="'/channels/${channles.id}'">
{{ channel.name }}</nuxt-link >
</p>
</div>
<div class="main-content">
<Nuxt />
</div>
</div>
</template>:toの部分は、v-bind:toの略です。その後にリンク先を指定しています。
現在のmountedだとチャンネルのidを取得できていないので、idを取得するようにします。
<script>
import { db } from '~/plugins/firebase'
export default {
data() {
return {
channels: [],
}
},
mounted() {
db.collection('channels')
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
this.channels.push({ id: doc.id, ...doc.data() })
})
})
},
}
</script>this.channels.push(doc.data())これではドキュメントしか取得できていません。
しかし、ドキュメントのIDを取得しなければいけませんので、this.channels.push({id: doc.id, ...doc.data()})このようにIDを取得する必要があります。
... はスプレッド構文と言われるものです。
これにより、チャンネル名をクリックすると画面が移動できるようになります。
チャンネルの移動ができましたので、チャンネルに保存されているメッセージを表示できるようにしていきます。
メッセージの保存
まずはfirebaseでchannelsのドキュメントの下にmessagesというcollectionを設定して、下記のようにmessagesのドキュメントを追加します。
それでは_id.vueのmountedを変更していきます。
<script>
import Messages from '~/components/Messages.vue'
import ChatForm from '~/components/ChatForm.vue'
import { db } from '~/plugins/firebase'
export default {
components: {
Messages,
ChatForm,
},
mounted() {
const channelID = this.$route.params.id
db.collection('channels').doc(channelID).collection('messages').get()
},
}
</script>nuxt では、 this.$route によってパラメーターの channel id を取得することができます。
具体的にはパラメーターの情報は、this.$route.params に保持されています。そして、_id.vue と指定している場合は、this.$routes.params.id でパラメーターを取得できます。
そして、messagesコレクションのデータを取得したいので、コードは下記のようになります。db.collection('channels').doc(channelID).collection('messages').get()
それでは、チャンネル一覧の時のようにデータを取得していきます。
<script>
import Messages from '~/components/Messages.vue'
import ChatForm from '~/components/ChatForm.vue'
import { db } from '~/plugins/firebase'
export default {
components: {
Messages,
ChatForm,
},
data () {
return {
messages: []
}
},
mounted() {
const channelID = this.$route.params.id
db.collection('channels').doc(channelID).collection('messages').get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
this.messages.push({id: doc.id, ...doc.data()})
})
})
},
}
</script>この部分はほとんど前回の部分でやったので、説明は省きます。
これでmessagesが保存ができました。
それでは、次回は表示ができるようにしていきます！
まとめ
今日はメッセージの保存までできました。
次回はメッセージを表示するところまでやっていきたいと思います！
最後まで読んでくださり、ありがとうございました！