質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

【Vue x Firebase】updateProfileメソッドでユーザー情報を更新したが情報が一部反映されない。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 270

score 42

VueとFirebaseを使用してアプリ制作をしており、新規登録時に名前(displayName)と初期アイコン(photoURL)を
updateProfile()を使って設定し、そこで設定された名前とアイコンは初期情報として
保存してユーザーのマイページに表示するようにしております。

そのプロフィール情報をもとにチャットページでは自身の情報「名前(displayName)」と「アイコン(photoURL)」を
以下のように表示するようにしております。

 <div class="myimage flex">
  <img :src="user.photoURL" width="50" height="50" />
  <div class="myname flex">{{ user.displayName }}</div>
 </div>

しかし、マイページにてプロフィール情報を更新すると、「Storage」「Firestore」には
正しくプロフィール情報が保存されていることは確認できていますが、
現状なぜか一部「名前(displayName)」と「アイコン(photoURL)」は更新されない状態です。

新規登録(signup.vue)

  signUp() {
      let self = this;
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.email, this.password)
        .then(userCredential => {
          userCredential.user.updateProfile({
            displayName: self.name,
            photoURL: require("../assets/デフォルト画像.jpg")
          });
          this.$swal("登録に成功しました。", {
            icon: "success"
          });
          this.uid = userCredential.user.uid;
          return firebase
            .firestore()
            .collection("users")
            .doc(this.uid)
            .set({
              name: this.name,
              time: firebase.firestore.FieldValue.serverTimestamp(),
              uid: userCredential.user.uid
            });
        })
        .then(() => {
          this.$router.push(`/mypage/${this.uid}`);
        })
        .catch(() => {
          this.$swal("登録情報が正しくありません。", {
            icon: "error"
          });
        });
    }
  }
};


ユーザーのプロフィールを更新するを参照しながら設定を行いました。

マイページでは「mypageeditxllg.vue(1024px以下1025px以上)」「mypageeditmd.vue(600以下)」「mypageeditsm.vue(400px以下)」と画面サイズに応じてコンポーネントで細分化して実装を行っております。

しかし、「mypageeditxllg.vue(1024px以下1025px以上)」では、自身のプロフィール情報(displayNameとphotoURL)が
更新した内容に変更され、表示されることは確認できておりますが、なぜか「mypageeditmd.vue(600以下)」「mypageeditsm.vue(400px以下)」では変更がされません。

ちなみに「mypageeditxllg.vue(1024px以下1025px以上)」のコードをそのままコピーし、実装しております。

チャットぺージのコンポーネントは一つで実装してます。

なぜ「mypageeditxllg.vue(1024px以下1025px以上)」では変更され表示されるのに、
「mypageeditmd.vue(600以下)」「mypageeditsm.vue(400px以下)」では変更・表示されないのか
原因が分からない状況です。

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

どうかよろしくお願いいたします。

以下はマイページ更新するコンポーネントになります。

mypageeditxllg.vueと名前にあるように
「mypageeditxllg.vue(1024px以下1025px以上)」のソースを掲載してます。

マイページ更新(mypageeditxllg.vue)

  methods: {
    onFileChange(e) {
      const image = e.target.files; //選択された画像ファイルを選択
      this.file = image[0]; //画像ファイルを1つだけ選択
      const S =
        "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
      const N = 16;
      this.uploadUrl = Array.from(crypto.getRandomValues(new Uint32Array(N)))
        .map(n => S[n % S.length])
        .join("");
      // Firebase storageに保存するパス乱数で決めてthis.uploadUrlへ代入
      let self = this;
      let fileReader = new FileReader();
      //FileReaderは、Fileオブジェクトからデータを読み込むことのみを目的としたオブジェクト
      fileReader.onload = function() {
        //fileReader.onloadは、読み込みが正常に完了した時に発火するイベント
        self.preview = fileReader.result;
        //fileReaderの結果をself.previewへ代入
        //関数の中ではfileReaderの[this]を参照してしまうため、一旦[self]に代入して、[this]の代わりに[self] とする
      };
      fileReader.readAsDataURL(this.file);
      //this.fileの値をデータURLとして読み込み、458行目(fileReader.result)が発火する。
    },
    updateBtn() {
      this.$swal({
        title: "内容確認",
        text: "この内容で更新しますか?",
        icon: "info",
        buttons: true,
        dangerMode: true
      })
        .then(willDelete => {
          if (willDelete) {
            let uploadParam = {};
            if (this.uploadUrl) {
              const uploadTask = firebase
                .storage()
                .ref(this.uploadUrl) //さっき決めたパスを参照して、
                .put(this.file); //this.fileへ保存する
              uploadTask.then(() => {
                uploadTask.snapshot.ref.getDownloadURL().then(fileUrl => {
                  //this.fileに保存されたrefを参照してファイルのダウンロード URL を取得して、fileUrlへ代入。
                  this.$set(this, "uploadedImage", {
                    fileUrl: fileUrl,
                    time: firebase.firestore.FieldValue.serverTimestamp()
                  });
                  uploadParam = { uploadedImage: this.uploadedImage };
                  //選択されたプロフィール画像含めプロフィール情報をfirestoreへ保存
                  firebase
                    .firestore()
                    .collection("users") //保存する場所を参照して、
                    .doc(this.$route.params.uid)
                    .set(
                      {
                        name: this.name,
                        sex: this.sex,
                        age: this.age,
                        access: this.access,
                        selfpr: this.selfpr,
                        profession: this.profession,
                        genre: this.genre,
                        favMovie: this.favMovie,
                        ...uploadParam,
                        time: firebase.firestore.FieldValue.serverTimestamp()
                      },
                      { merge: true }
                      //set()でmergeをtrueにすると、上書き。updetaと同様。
                    )
                    .then(() => {
                      this.$router.go({
                        path: `/mypage/${this.$route.params.uid}`,
                        force: true
                      });
                    })
                    .catch(() => {
                      this.$swal("更新出来ませんでした。", {
                        icon: "error"
                      });
                    });
                  const currentUser = firebase.auth().currentUser;
                  currentUser.updateProfile({
                    displayName: this.name,
                    photoURL: fileUrl
                  });
                });
              });
            } else {
              firebase
                //プロフィール画像が選択されなかった場合、画像以外のプロフィール情報をfirestoreへ保存
                .firestore()
                .collection("users")
                .doc(this.$route.params.uid)
                .set(
                  {
                    name: this.name,
                    sex: this.sex,
                    age: this.age,
                    access: this.access,
                    selfpr: this.selfpr,
                    profession: this.profession,
                    genre: this.genre,
                    favMovie: this.favMovie,
                    ...uploadParam,
                    time: firebase.firestore.FieldValue.serverTimestamp()
                  },
                  { merge: true }
                )
                .then(() => {
                  this.$router.go({
                    path: `/mypage/${this.$route.params.uid}`,
                    force: true
                  });
                })
                .catch(() => {
                  this.$swal("更新出来ませんでした。", {
                    icon: "error"
                  });
                });
              const currentUser = firebase.auth().currentUser;
              currentUser.updateProfile({
                displayName: this.name
              });
            }
          } else {
            this.$swal("キャンセルしました。");
          }
        })
        .catch(() => {
          this.$swal("更新出来ませんでした。", {
            icon: "error"
          });
          this.preview = "";
          //更新をキャンセルした場合、this.previewを空にする。
        });
    },
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

今もう一度確かめたところ問題なく正常に動作した為、一度クローズ致します。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る