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

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

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

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

Firebase

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

Q&A

1回答

2805閲覧

Firebase cloud functionsでpostで渡したデータを受け取れない

Khy

総合スコア118

Vue.js

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

Firebase

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

0グッド

1クリップ

投稿2019/06/13 05:38

Vue.jsとVuetifyとFirebaseを使用しております。

cloud functionsの練習でフォームに名前を入力し、ボタンを押したらそれをトリガーとしてcloud functionsのログに入力した名前を表示しようとしているのですが上手くいきません。

Vue.jsのコードとcloud functionsのコードは以下の通りです。
現状ではcloud functionsのログにundefinedと表示されております。
どのようにすれば良いのかご教授いただけると幸いです。

/// Vue /// <template> <v-form> <v-text-field label="名前" name="onamae" :value="oaname" v-model="onamae"></v-text-field> <v-btn @click="send">送信</v-btn> </v-form> </template> <script> import axios form 'axios' export default{ data(){ return{ onamae: '', } }, methods:{ send(){ axios.post('https://asia-northeast1-PROJECT_NAME.cloudfunctions.net/showName', { onamae: this.onamae, }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); } } } </script>
const functions = require('firebase-functions'); const admin = require('firebase-admin'); admin.initializeApp(functions.config().firebase); exports.showName = functions.region('asia-northeast1').https.onRequest((req, res) => { const onamae = req.body['onamae']; console.log(onamae); })

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

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

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

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

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

guest

回答1

0

どのようにすれば良いのかご教授いただけると幸いです。

サクッと見た感じfunctions側は問題なさそうですねぇ。
とりあえず丸投げは良くないので、問題の切り分け方の一例を紹介します。あとはご自身でやってみてください。

1.ターミナル等を使ってcurlでリクエストしてみる

curl -X POST -H "Content-Type:application/json" https://asia-northeast1-PROJECT_NAME.cloudfunctions.net/showName -d '{"onamae":"hoge"}'

2.functionsのログを確認する
undefinedの場合 → functions側の問題
hogeの場合 → vue側の問題(リクエストヘッダーやthis.onamaeの中身を確認する)

投稿2019/06/13 21:58

xenbeat

総合スコア4258

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

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

Khy

2019/06/14 16:45

ご回答ありがとうございます。 curlでリクエストしてみたところ問題なく値が入っておりました。 ディベロッパーツールで見てみたらデータが渡せていなさそうでした。またstatusもpendingになっておりました。 もう少し調べてみます、ヒントを頂きありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問