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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

Q&A

解決済

1回答

836閲覧

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

TMTN

総合スコア52

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Cloud Firestore

Cloud Firestore は、自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQLドキュメントデータベースです。

0グッド

0クリップ

投稿2021/05/24 06:03

#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("キャンセルしました。"); }); },

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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("キャンセルしました。"); } }); },

投稿2021/05/26 12:21

TMTN

総合スコア52

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問