【Vue x RealtimeDatabase】Firestoreにてデータを保存しているユーザー情報を取得して名前とアンコンを表示したいです。

Question

#RealtimeDatabaseにてFirestoreにてデータを保存しているユーザー情報を取得して表示したいです。

VueとFirebaseにてチャットを実装しているのですが、チャットルームにて名前とアイコンを表示させたいです。

Firestoreを使用してユーザー情報を管理しているのですが、
Realtime Databaseでそのユーザー情報を表示させたいと考えていますが、行き詰まってる状況です・・

 created() {

　　~ 省略 ~

    const currentUser = firebase.auth().currentUser;
    //現在ログインしているユーザーを取得
    this.uid = currentUser.uid;

    this.userIds.forEach((id) => {
      firebase
        .firestore()
        .collection("users")
        .doc(id)
        .get()
        .then((snapshot) => {
          this.userDatas.push(snapshot.data());
        });
    });
  },
methods: {
    scrollBottom() {
      this.$nextTick(() => {
        window.scrollTo(0, document.body.clientHeight);
      });
    },
    childAdded(snap) {
      const message = snap.val();
      if (!this.userIds.includes(message.userid))
        this.userIds.push(message.userid);
      this.chat.push({
        key: snap.key,
        name: message.name,
        image: message.image,
        message: message.message,
        userid: message.userid,
        time: message.time,
      });
      this.scrollBottom();
    },
 returnUserData(id) {
      const userData = this.userDatas.filter((user) => user.id === id);
      return userData;
    },

上記のように記載して表示させて、filterメソッドを使ってidからユーザーを取り出そうと考えていますが、
どのようにここから記述したらいいのかわからない状況です。

分かる方いらっしゃいましたらお力添えをいただきたいです。

お手数おかけしますが、よろしくおがいいたします。

<template>
  <div class="chat">
    <h1 class="chat-tll flex">
      <div class="flash neon">Chat Room</div>
      <router-link :to="`/board/${this.uid}`" class="back-btn">
        <img
          src="../assets/戻る.jpg"
          alt="チャット終了"
          class="back-btn-icon"
        />
      </router-link>
    </h1>
    <!--Firebase から取得したリストを描画-->
    <transition-group name="chat" tag="div" class="list content">
      <!--chatの中の{ key, name, image, message ,userid }をそれぞれ取得-->
      <section
        v-for="{ key, name, image, message, userid, time } in chat"
        :key="key"
      >
        <div v-if="userid === user.uid" class="myitem flex">
          {{ userDatas }}
          <!-- 自身 -->
          <!--「画像」の指定-->

          <!--「名前」と「メッセージ」の指定-->
          <div class="mydetail">
            <div class="mytime">{{ $dayjs(time).format("hh:mm") }}</div>
            <div @click.right.prevent="deleteMessage(key)" class="mymessage">
              <nl2br tag="div" :text="message" />
            </div>
          </div>
          <div class="myimage flex">
            <img :src="image" width="40" height="40" />
            <div class="myname">{{ name }}</div>
          </div>
        </div>
        <div v-else class="otheritem flex">
          <!-- 自身ではない -->
          <!--「画像」の指定-->
          <div class="otherimage flex">
            <img :src="image" width="40" height="40" />
            <div class="othername">name</div>
          </div>
          <!--「名前」と「メッセージ」の指定-->
          <div class="otherdetail">
            <div class="othermessage">
              <nl2br tag="div" :text="message" />
            </div>
            <div class="othertime">{{ $dayjs(time).format("hh:mm") }}</div>
          </div>
        </div>
      </section>
    </transition-group>

    <!-- 入力フォームの設定 -->
    <div class="message-inner flex">
      <form action @submit.prevent="doSend" class="form flex">
        <textarea
          v-model="input"
          placeholder="メッセージを入力"
          :disabled="!user.uid"
          @keydown.enter.exact.prevent="doSend"
        ></textarea>
        <!-- ユーザーでなければ無効化 -->
        <button type="submit" :disabled="!user.uid" class="send-button">
          <img src="../assets/電球.jpg" class="send-img" alt="送信" />
        </button>
      </form>
    </div>
  </div>
</template>

<script>
import firebase from "firebase";
import Nl2br from "vue-nl2br";
import Vue from "vue";
// 改行を <br> タグに変換するモジュール
import dayjs from "dayjs";

dayjs.locale("ja");
Vue.prototype.$dayjs = dayjs;

export default {
  components: { Nl2br },
  data() {
    return {
      user: {}, // ユーザー情報
      chat: [], // 取得したメッセージを入れる配列
      input: "", // 入力したメッセージ
      usersData: [],
      profileDeta: {},
      userIds: [],
      userDatas: [],
    };
  },
  created() {
    firebase.auth().onAuthStateChanged((user) => {
      // ログイン状態ならuserが取得できる
      this.user = user ? user : {};
      //firebase.database()で以下のデータベースの読み書きを行う。
      const ref_message = firebase.database().ref(this.$route.params.id);
      //[router.vue]にて「/ ~ /:id」と指定しルートがマッチした時、
      //この動的セグメントの値は全てのコンポーネント内で this.$route.params として利用可能になる。
      if (user) {
        this.chat = [];
        // limitToLast(10)で並べ替えられた「message」の最後の10個を取得。
        // on()は、message に変更があったときのハンドラを登録
        //child_addedは、データベースのリスト「message」を取得。
        ref_message.limitToLast(10).on("child_added", this.childAdded);
      } else {
        // message に変更があったときのハンドラを解除
        ref_message.limitToLast(10).off("child_added", this.childAdded);
      }
    });
    const currentUser = firebase.auth().currentUser;
    //現在ログインしているユーザーを取得
    this.uid = currentUser.uid;

    this.userIds.forEach((id) => {
      firebase
        .firestore()
        .collection("users")
        .doc(id)
        .get()
        .then((snapshot) => {
          this.userDatas.push(snapshot.data());
        });
    });
    console.log(this.userIds);
  },
  methods: {
    // スクロール位置を一番下に移動
    scrollBottom() {
      this.$nextTick(() => {
        //this.$nextTickは、再描画を待つ。
        //絶対値からbody要素の高さを取得
        window.scrollTo(0, document.body.clientHeight);
      });
    },
    childAdded(snap) {
      //snapshotとは、ある時点における特定のデータベース参照にあるデータの全体像を写し取ったもの
      //childAdded：データベースからアイテムのリストを取得する関数
      // 受け取ったメッセージをchatに追加
      const message = snap.val();
      if (!this.userIds.includes(message.userid))
        this.userIds.push(message.userid);
      //イベントのときにデータベース内の「message」データを取得。
      // データベースに新しい要素が追加されると随時呼び出される
      this.chat.push({
        key: snap.key,
        name: message.name,
        image: message.image,
        message: message.message,
        userid: message.userid,
        time: message.time,
      });
      this.scrollBottom();
      //スクロールの一番下に追加。
    },
    doSend() {
      const time = time;
      if (this.user.uid && this.input.length) {
        //  firebaseに書き込まれたメッセージを追加
        firebase
          .database()
          .ref(this.$route.params.id)
          .push(
            {
              message: this.input,
              name: this.user.displayName,
              image: this.user.photoURL,
              userid: this.user.uid,
              time: firebase.database.ServerValue.TIMESTAMP,
            },

            () => {
              this.input = ""; // フォームを空にする
            }
          );
      }
    },
    returnUserData(id) {
      const userData = this.userDatas.filter((user) => user.id === id);
      return userData;
    },
    deleteMessage(key) {
      firebase
        .database()
        .ref(this.$route.params.id + "/" + key)
        .remove();
      console.log(key);
      this.$swal({
        title: "内容確認",
        text: "メッセージを削除しますか？",
        icon: "warning",
        buttons: true,
        dangerMode: true,
      }).then((willDelete) => {
        if (willDelete) {
          this.$swal("メッセージを削除しました", {
            icon: "success",
          });
          this.$router.go({
            path: `/chat/${this.$route.params.id}`,
            force: true,
          });
        } else {
          this.$swal("キャンセルしました。");
        }
      });
    },
  },
};
</script>

#追記1

    const currentUser = firebase.auth().currentUser;
    //現在ログインしているユーザーを取得
    this.uid = currentUser.uid;

    this.userIds.forEach((id) => {
      firebase
        .firestore()
        .collection("users")
        .doc(id)
        .get()
        .then((snapshot) => {
          this.userDatas.push(snapshot.data());
        });
    });
    console.log(this.userIds);
  },

上記、現状this.userIds.forEach((id)の部分でforEachが機能していない状況です。
this.userIdsの値は画像にあるようにobserverでデータは取得できていますが、配列でない為、
データがforEachにわたっていないように見受けられます。

※ this.userDatasの値を確認しようとしてもコンソール自体機能しなかった為。

引き続き分かる方いらっしゃいましたらお力添えを頂きたいです。

宜しくお願い致します。

#追記2

長期間回答が得られない為、以下サイトにも掲載させて頂いております。

【Vue x RealtimeDatabase】Firestoreにてデータを保存しているユーザー情報を取得して名前とアンコンを表示したいです。

#追記3

    this.userIds.forEach((id) => {
      firebase
        .firestore()
        .collection("users")
        .doc(id)
        .get()
        .then((snapshot) => {
          this.userDatas.push(snapshot.data());
        });
    });

上記forEachがオブサーバー型になっており、機能していなかったため、下記の段階でjson型に変えてみました。
しかし、if文に入ったthis.userIdsをコンソールを確認しましたが、再びオブサーバー型になってしまいます。

message.userIdのデータ型がstringになるようにしてから、this.userIdsにpushしたいのですが、
stringにして渡すやり方をお伺いしたいです。

    childAdded(snap) {
      const message = JSON.parse(JSON.stringify(snap.val()));
      if (!this.userIds.includes(String(message.userid)))
        this.userIds.push(String(message.userid));

      console.log(this.userIds);
      this.chat.push({
        key: snap.key,
        name: message.name,
        image: message.image,
        message: message.message,
        userid: message.userid,
        time: message.time,
      });
      this.scrollBottom();

    },

Comments

[1T2R3M4]

https://qiita.com/TMTN/questions/e52a1eb92f735bbec94b

以下ご対応ください。
https://teratail.com/help#posted-otherservice

[TMTN]

1T2R3M4様
ご指摘ありがとうございます。
対応済です。大変申し訳ございませんでした。

Answer 1

以下コードでthis.userDatas（配列）に入っている値uesr.uidとidが一致したものを表示させて実装することができました。

<div class="otherimage flex">
            <router-link :to="`/mypage/${returnUserData(userid).uid}`">
            <img
              :src="
                returnUserData(userid)
                  ? returnUserData(userid).uploadedImage.fileUrl
                  : preview
              "
              width="50"
              height="50"
            />
              <div class="othername flex">
                {{
                  returnUserData(userid) ? returnUserData(userid).name : "NO NAME"
                }}
              </div>
            </router-link>
          </div>

export default {
  components: { Nl2br },
  data() {
    return {
      userIds: [],
      userDatas: [],
      preview: require("../assets/デフォルト画像.jpg"),
    };
  },

childAdded(snap) {
      const message = JSON.parse(JSON.stringify(snap.val()));
      if (!this.userIds.includes(String(message.userid))) {
        this.userIds.push(String(message.userid));

        let self = this;
        firebase
          .firestore()
          .collection("users")
          .doc(message.userid)
          .get()
          .then((snapshot) => {
            self.userDatas.push(snapshot.data());
          });
      }
    returnUserData(id) {
      const userData = this.userDatas.find((user) => user.uid === id);
      return userData;
    },