【Vue x Firestore】投稿ボタンを押下されたらリアルタイムで画面上に投稿が反映されるようにしたい。

Question

#投稿ボタンを押下されたらリアルタイムで画面上に投稿が反映されるようにしたい。

Firestoreにてデータ管理していますが、投稿ボタンを押下されたらリアルタイムで画面上に投稿が反映されるようにしたく、
this.$router.go({ path: /board/${this.uid}, force: true });を使って投稿されたらページをリロードするようにしているのですが、リロード後投稿が反映されない状況です・・

this.$router.go({ path: /board/${this.uid}, force: true });を削除して、挙動を確認すると投稿は確認できます。
投稿後にリロードしているのに反映されず、リロードのコードを削除して手動でリロードさせると反映されるのがわからず困っています。。

 postItem() {
      const currentUser = firebase.auth().currentUser;
      this.uid = currentUser.uid;

      const id = firebase
        .firestore()
        .collection("posts")
        .doc().id;
      //変数「id」に入れて、コレクションの"posts"を参照して、「id」を取得

      this.$swal({
        title: "内容確認",
        text: "この内容で投稿しますか？",
        icon: "info",
        buttons: true,
        dangerMode: true,
      }).then((willDelete) => {
        if (willDelete) {
          firebase
            .firestore()
            .collection("posts")
            .add({
              title: this.title,
              description: this.description,
              genre: this.genre,
              time: firebase.firestore.FieldValue.serverTimestamp(),
              //サーバ側で値設定
              id: id,
              //dataにデータを作ってないので、thisは付けなくてOK!
              uid: this.$route.params.uid,
            });
          this.$swal("投稿しました。", {
            icon: "success",
          });
          this.$router.go({ path: `/board/${this.uid}`, force: true });
          //router.go(path:"/ ~ ")まで戻す。
        } else {
          this.$swal("キャンセルしました。");
        }
      });
    },

#試した事

this.$router.push({ path: `/board/${this.uid}`, force: true });

上記では下記のようなエラーが出てしまいました。

おそらくthis.$router.goとして、ブラウザのもどるボタンを押した時のように、
前のキャッシュを参照して表示してしまうため、登録された情報が反映されないのかと考えています。

そもそも投稿した時に、投稿情報をコンポーネントに渡してあげて、そのコンポーネントだけ再renderすれば良いと調べてわかった事なのですが、記述方法がわからず行き詰まっております。

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

よろしくおねがい致します。

Answer 1

以下のコードのようにしたら解決致しました。

Firestoreに保存される前にリロードが動いていたことが原因でした。

postItem() {
      const currentUser = firebase.auth().currentUser;
      this.uid = currentUser.uid;
      const id = firebase

        .firestore()
        .collection("posts")
        .doc().id;
      //.doc().firebaseでコレクションの"posts"を参照して、「id」を取得

      this.$swal({
        title: "内容確認",
        text: "この内容で投稿しますか？",
        icon: "info",
        buttons: true,
        dangerMode: true,
      })
        .then((willDelete) => {
          if (willDelete) {
            firebase
              .firestore()
              .collection("posts")
              .add({
                title: this.title,
                description: this.description,
                genre: this.genre,
                time: firebase.firestore.FieldValue.serverTimestamp(),
                id: id,
                uid: this.$route.params.uid,
              })
              .then(() => {
                this.$swal("投稿しました。", {
                  icon: "success",
                });
                this.$router.go({ path: `/board/${this.uid}`, force: true });
              })
              .catch(() => {
                console.log("err");
              });
          } else {
            this.$swal("キャンセルしました。");
          }
        })
        .catch(() => {
          this.$swal("投稿出来ませんでした。", {
            icon: "error",
          });
        });
    },