ブラウザからFirestoreにデータが追加できないエラーについて

現在、vue.jsとfirebaseでチャットを作成しています。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <title>Chat</title>
7    <link rel="stylesheet" href="styles.css">
8
9  </head>
10  <body>
11    
12    <div id ="app">
13      <h1>ひとことchat</h1>
14      <div class="scroll">
15       <ul>
16         <li v-for="(msg,index) in msgs">
17           {{msg}}
18           <span @click="deleteitem(index)" class="command"><img src="ei-trash.png"></span>
19           
20         </li>
21         
22       </ul>
23       </div>
24       <form @submit.prevent="additem"> 
25       <textarea class = "form" rows="1" placeholder="メッセージを入力" required v-model="Newitem"></textarea>
26      <input type="submit"  class=btn value="送信する">
27      
28
29       </form>
30
31    </div>
32

vue
1const database = firebase.firestore();
2
3const collection = database.collection('messages');
4
5
6
7var app = new Vue({
8  el: '#app',
9  data: {
10    Newitem: '',
11    msgs: []
12  },
13  methods: {
14    additem: function(){
15      this.msgs.push(this.Newitem);
16      this.Newitem='';
17    },
18    deleteitem: function(index){
19      if(confirm('コメントを削除してもよろしいですか？')){
20        this.msgs.splice(index,1);
21       }
22    },
23
24    scrollToEnd(){
25      var container = document. querySelector('.scroll');
26      var scrollHeight = container.scrollHeight;
27      container.scrollTop = scrollHeight;
28    }   
29  },
30  
31 updated(){
32   this.scrollToEnd();
33 }
34});
35
36collection.add({
37  message: form
38})
39.then(doc => {
40  console.log(`${doc.id} added!`);
41})
42.catch(error => {
43  console.log(error);
44});
45

ブラウザからFirestoreにデータを追加したいのですが、

collection.add({
  message: form
})

の部分で Uncaught ReferenceError: form is not defineというエラーが出ています。どう対処すれば、データが追加できるかご教示お願いします。

行動規範の内容に同意します

回答1件

自己解決

vue
1methods: {
2    additem: function(){
3      this.msgs.push(this.Newitem);
4      this.Newitem='';

の後に
collection.add({
messages: this.msgs
を追記したらデータが追記されました！

投稿2020/10/23 16:37

ciel2231

総合スコア11

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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

ブラウザからFirestoreにデータが追加できないエラーについて

関連した質問