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

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

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

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

Firebase

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

Cloud Firestore

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

Q&A

0回答

393閲覧

Vue.js + Firebaseでクイズの投稿機能を作りたいです。

KouKuma

総合スコア2

Vue.js

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

Firebase

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

Cloud Firestore

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

0グッド

0クリップ

投稿2021/04/01 13:31

回答者の皆様
お世話になっております。
現在、Vue.js + Firebaseでクイズアプリを作ろうとしています。
作成の過程でクイズを投稿する機能を追加したいと思い、実装を行っているのですが

Uncaught (in promise) Error: Request failed with status code 400

というエラーが出てしまい、うまくCloud Firestoreにデータが入りません。

自分でも調べてみたのですが、わからなかったためこちらで質問させていただきます。
お忙しい中誠に恐れ入りますが、ご回答頂けますと幸いです。

##環境

  • Vue.js 2.6
  • Firebase
  • Cloud Firestore

##コード

App.vue

<template> <div id="app"> <Header/> <router-view></router-view> <h3>問題を登録する</h3> <label for="question">問題:</label> <input id="question" type="text" v-model="question"> <br><br> <label for="answers[0]">選択肢1:</label> <input v-model="answers[0]" type="text"> <br><br> <label for="answers[1]">選択肢2:</label> <input v-model="answers[1]" type="text"> <br><br> <label for="answers[2]">選択肢3:</label> <input v-model="answers[2]" type="text"> <br><br> <label for="answers[3]">選択肢4:</label> <input v-model="answers[3]" type="text"> <br><br> <label for="answer">解答:</label> <textarea id="answer" v-model="answer"></textarea> <br><br> <button @click="createComment">問題を登録する</button> <br><br> <Footer/> </div> </template> <script> import Header from '/src/components/Header'; import Footer from '/src/components/Footer'; import axios from "axios"; export default { name: 'App', components: { Header, Footer, }, data() { return { question: "", answers: [], answer: "", posts: [] }; }, methods: { createComment() { axios.post("https://firestore.googleapis.com/v1/projects/プロジェクトID/databases/(default)/documents/comments", { fields: { question: { stringValue: this.question }, answers: [ { stringValue: this.answers } ], answer: { integerValue: this.answer } } }); } } } </script>

##試したこと

answers: [ { stringValue: this.answers } ],

answers[0]: { stringValue: this.answers },

に変更してみた。
→「Syntax Error: Unexpected token, expected "," (64:17)」が出てきた。

##予想

  • answersが怪しい。(questionとanswerだけで試してみたらうまく投稿できたため)
  • answersだけ、配列の状態でデータベースに保存したくて、配列の形でデータを投稿させようとしていることが関係していそう。

→ axiosのpostメソッドについて検索してみたが、配列のままデータベースに入れるやり方を見つけることが出来ませんでした、、、

##最後に
以上が質問内容になります。
ご不明点や不足している点等ございましたら遠慮なく申し付けください。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問