firebaseの永続性について

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

vue
1var app = new Vue({
2    el:　'#app',
3    data:{
4      msg: '',
5      chat: [],
6    },
7  
8
9    methods: {
10      onlogin:function(){
11        firebase.auth().signInAnonymously();
12
13        login.classList.add('hidden');
14
15        [text,btn].forEach(el=>{
16          el.classList.remove('hidden');
17        });
18      },
19
20     addchat(){
21      collection.add({
22        name: this.msg,
23        created: firebase.firestore.FieldValue.serverTimestamp()
24      });
25      this.msg = '';
26      collection.orderBy('created').onSnapshot(querySnapshot =>{
27      const obj = {}
28      querySnapshot.forEach(doc=>{
29        obj[doc.id]= doc.data()
30      })
31      this.chat = obj
32      })
33    },
34    deletechat: function(key){
35      if(confirm('削除してもよろしいですか？')){
36      collection.doc(key).delete();
37      }
38    },
39    scrollToEnd(){
40      const container = document.querySelector('.scroll');
41      const scrollHeight = container.scrollHeight;
42      container.scrollTop = scrollHeight;
43    }
44  },
45
46    updated(){
47      this.scrollToEnd();
48    }
49  });

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charest="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <title>ひとことチャット</title>
7    <link rel="stylesheet" href="styles.css">
8
9  </head>
10  <body>
11    <div id="app">
12      <h1>ひとことチャット
13      <button id="login" @click="onlogin()">Login</button>
14      </h1>
15      <div class="scroll">
16      <ul>
17        <li v-for="(chats,key) in chat" > 
18          {{chats.name}}
19          <button @click="deletechat(key)">X</button>
20        </li>
21      </ul>
22    </div>
23
24     <input type=text v-model="msg"
25     placeholder=メッセージを入力>
26     <button @click="addchat()">送信する</button>
27
28
29    </div>
30
31    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
32    
33    <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-app.js"></script>
34
35    <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-auth.js"></script>
36
37    <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-firestore.js"></script>
38

データの書き込み、読み込みをすることはできるのですが、リロード（再読み込み）すると、書き込まれていた画面上の書き込みデータが消えて、再度書き込みすると、画面上に復活するのですが、リロードしても、そのまま永続的に書きこまれた状態にするにはどうすればいいのでしょうか？非常に困っています。

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

回答1件

data:{
      msg: '',
      chat: [],
    },

となっているので、読み込み直すとchatの中身が空になっている状況だと思います。

解決方法としては、ページ読み込み時に実行される createdフックを利用するなどでしょうか。

 created: function () {
    // ここで chat にデータを入れる。
  }

参考：インスタンスライフサイクルフック

投稿2020/11/09 10:04

hukurouo

総合スコア108

あなたの回答

tips

プレビュー

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

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

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

firebaseの永続性について

関連した質問