PROGRAMMING

ユーザー情報を表示する【Vue.js】

前回はユーザーの情報を保存できるようになったので、今日はユーザー情報をページ上で表示できるようにしていきます。

今回の内容
・アバター画像の表示
・投稿にユーザー情報の表示

今回はこんな感じでやっていきます。

今回の内容

アバター画像の表示

現在はログインしている時でも、チャットフォームをクリックするとモーダルが表示されてしまうので、まずはログインしている時にはモーダルを表示させるようにします。

<template>
  <div class="input-container">
   + <img v-if="isAuthenticated" :src="user.photoURL" class="avatar" />
   + <textarea
      v-if="isAuthenticated"
      v-model="text"
      @keydown.enter="addMessage"
    ></textarea>
   + <textarea v-else v-model="text" @click="openLoginModal"></textarea>
    <el-dialog title="" :visible.sync="dialogVisible" width="30%">
      <div class="image-container">
        <img src="~assets/google_sign_in.png" @click="login" />
      </div>
    </el-dialog>
  </div>
</template>

v-ifを使い、gettersで定義したisAuthenticatedを使い、ログインをしていないモーダルを表示せずに入力できるようにして、ログインをしている時にはモーダルを表示できるようにしました。

v-modelってなんだっけって少しだけ忘れていたので、参考資料を添付しておきます。

そして、isAuthenticatedChatFormで定義していないので、定義してあげます。

<script>
import Vue from 'vue'
import { mapActions } from 'vuex'
import ElementUI from 'element-ui'
import { db, firebase } from '~/plugins/firebase'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
export default {
  data() {
    return {
      dialogVisible: false,
      text: null,
    }
  },
 + computed: {
    isAuthenticated(){
      return this.$store.getters.isAuthenticated
    }
  },
  methods: {...省略
}

</script>

computedisAuthenticatedメソッドを定義します。

これでログインしていてば、モーダルが出ないようになっているはずです。

そして次は、ユーザーのアバター画像を表示できるようにしたいと思います。

まずはユーザーの画像を表示できるようにします。

photoURLというのがgoogleで登録してあるユーザーの画像情報です。

そのphotoURLを使って、まずはHTMLの方を設定していきたいと思います。

<template>
  <div class="input-container">
   + <img v-if="isAuthenticated" :src="user.photoURL" class="avatar" />
    <textarea
      v-if="isAuthenticated"
      v-model="text"
      @keydown.enter="addMessage"
    ></textarea>
    <textarea v-else v-model="text" @click="openLoginModal"></textarea>
    <el-dialog title="" :visible.sync="dialogVisible" width="30%">
      <div class="image-container">
        <img src="~assets/google_sign_in.png" @click="login" />
      </div>
    </el-dialog>
  </div>
</template>

:srcv-bind:srcの省略形ですね。

それで下記のように表示されていればOKです。

それでは、投稿のメッセージの横にユーザー名とアカウント画像を表示させてみようと思います。

投稿にユーザー情報の表示

ユーザー名とユーザー画像を表示できるようにHTMLをコメントアウトを下記のように外しておきます。

それ以外は特に追加する必要はありません。

<template>
  <div class="chat-container">
    <div class="thumbnail-container">
      <img :src="message.user.thumbnail" />
    </div>
    <div class="message-container">
      <div class="user-name">{{ displayname }}</div>
      <div class="message">{{ message.text }}</div>
    </div>
  </div>
</template>

それでは、このdisplayNamethumbnailに情報を入れていきたいと思います。

<script>
import Vue from 'vue'
import { mapActions } from 'vuex'
import ElementUI from 'element-ui'
import { db, firebase } from '~/plugins/firebase'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
export default {
  data() {
    return {
      dialogVisible: false,
      text: null,
    }
  },
  computed: {
    user() {
      return this.$store.state.user
    },
    isAuthenticated() {
      return this.$store.getters.isAuthenticated
    },
  },
  methods: {
    ...mapActions(['setUser']),
    openLoginModal() {
      this.dialogVisible = true
    },
    addMessage(event) {
      if (this.enterJapaneseConversion(event)) {
        return
      }
      const channelId = this.$route.params.id
      db.collection('channels')
        .doc(channelId)
        .collection('messages')
        .add({
          text: this.text,
          createdAt: new Date().getTime(),
         + user: {
         +  name: this.user.displayName,
         +  thumbnail: this.user.photoURL,
          },
        })
        .then(() => {
          this.text = null
        })
    },
    enterJapaneseConversion(event) {
      const codeForConversion = 229
      return event.keyCode === codeForConversion
    },
    login() {...省略
  },
}
</script>

Firestoreにメッセージの内容だけを保存していたので、ユーザーの情報(ユーザー名とアイコン画像)を保存できるようにしました。

message.usernullとなっているので、message.user.thumbnailthumbnailだけで実行されます。

これでユーザーの情報が投稿に反映されれいるかどうかを確認してみましょう。

エラーが出てしまいました。

ユーザー情報が今現在の投稿はちゃんと保存されていないので、メッセージを削除しないといけません。

messagesのコレクションを下記のように、削除します。

削除を完了したら、再度投稿してみましょう。

上記のように違うアカウントでも投稿できるようになりました。

まとめ

これで投稿機能は完成しました。

次回はログアウト機能を追加すればほぼ完成です。

最後まで読んでいただきありがとうございました。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.