【Vue x Firestore】then()とcatch()がうまく実装されない。

Question

#then()とcatch()がうまく実装されない。

下記のようにアラートで「この内容で投稿しますか？」と表示をさせてから、
then()、つまり「OK」を押下されたらthen()内を実行し、

.then(() => {
          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 });
        })

catch()、「キャンセル」が押下されたら何もしない

.catch(() => {
          this.$swal("キャンセルしました。");
        });

というように記述したつもりですが、現状アラートで用意した「OK」「キャンセル」どちらを押下しても投稿されてしまいます。。

また、firebase.firestore().collection("posts").add()を
firebase.firestore().collection("posts").set()に変えたら
「OK」「キャンセル」どちらを押下してもキャンセルされてしまう状況です。

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

よろしくお願い致します。

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(() => {
          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 });
        })
        .catch(() => {
          this.$swal("キャンセルしました。");
        });
    },

Answer 1

OK,キャンセルボタンを押した時の分岐が実装されていなかったため、以下のように記述すると解決いたしました。

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,
              //dataにデータを作ってないので、thisは付けなくてOK!
              uid: this.$route.params.uid,
            });
          this.$swal("投稿しました。", {
            icon: "success",
          });
          this.$router.push({ path: `/board/${this.uid}`, force: true });
          //router.go(path:"/ ~ ")まで戻す。
        } else {
          this.$swal("キャンセルしました。");
        }
      });
    },