回答者の皆様
お世話になっております。
現在、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メソッドについて検索してみたが、配列のままデータベースに入れるやり方を見つけることが出来ませんでした、、、
##最後に
以上が質問内容になります。
ご不明点や不足している点等ございましたら遠慮なく申し付けください。
あなたの回答
tips
プレビュー