キャッシュを無視してリロードをさせたい

Question

#Vueにてキャッシュを無視してリロードをさせたい

post.vueにて投稿内容を追加して、board.bueにてpostデータを取得して表示させています。

post.vue内にpostItem()というボタンを設置して、postItem()を押下されたらFirestoreへデータを追加し、
Firestoreに保存後、「投稿しますか？」というアラートを表示して、「ok」が押下されたら
以下コードでリロードをさせて、新しく投稿されたpostをboard.vueに表示させたいのですが、
現状前のキャッシュ参照して表示してしまっていう為か新しく投稿したpostがboard内に表示されない状況です。

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

ちなみに上記のコードを削除して、手動でリロードをかけると新しく投稿したpostはboardに表示されます。

キャッシュを無視してリロードさせて、boardに表示させるにはどのようにしたらよろしいでしょうか。

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

宜しくお願い致します。

#post.vue

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

      const id = firebase
        .firestore()
        .collection("posts")
        .doc().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,
            });
          this.$swal("投稿しました。", {
            icon: "success",
          });
          this.$router.go({ path: `/board/${this.uid}`, force: true });
        } else {
          this.$swal("キャンセルしました。");
        }
      });
    },

#board.vue

export default {
  data() {
    return {

   ~ 省略 ~ 

      allData: [],
    };
  },

  created() {
    // "posts"コレクションの全ドキュメントを取得。
    firebase
      .firestore()
      .collection("posts")
      .orderBy("time", "desc")
      .get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          this.allData.push({ ...doc.data(), id: doc.id });
          console.log(this.allData);
        });
      });
}.

Comments

[FKM]

メソッドでないと画像はキャッシュを持ってしまうので入れ替わらないというのは有名な現象ですが、それと関係あるのでしょうかね。

[TMTN]

コメントありがとうございます。

なんとか解決致しましたが、キャッシュは関係なかったようです・・
Firestoreに保存される前にリロードが動いていたことが原因でした。。

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",
          });
        });
    },