59007


firebaseのリアルタイムデータベース上のデータの変更に応じて、リストレンダリングをしたいのですが、表示されません。（画像A）  
`members`オブジェクトをローカルでつくって読み込むとうまく表示され、入力するとオブジェクトが更新されるのですが。（画像B）

（画像A）

![1](https://i.stack.imgur.com/OYFdn.png)

（画像B）

[![画像の説明をここに入力](https://i.stack.imgur.com/vQIvM.png)](https://i.stack.imgur.com/vQIvM.png)  
画像Bの方には、「reactiveGetter」などが付いているようです。

また

[code]

    app.$forceUpdate();
    
[/code]

としてみたのですが、だめです。

[code]

     <div id="app">
            <ul>
                <li v-for="m in members">
                    <input type="text" v-model:value="m.name">
                    <input type="text" v-model:value="m.state">
                    <input type="text" v-model:value="m.dest">
                </li>
            </ul>
        </div>
        <script>
            let app = new Vue({
                el: "#app",
                data: {
                    members: []
                },
                methods: {
                    setWatcher: function ()
                    {
                        var ref = firebase.database().ref('/users/' + userID + '/members');
                        ref.on('value', function (snapshot)
                        {
                            this.members = snapshot.val();
                            console.log(members); // ログにArrayが表示される
    　　　　　　　　　　　　　　 app.$forceUpdate(); // 効かない模様
                        });
                    }
                },
                created: function ()
                {
                    this.setWatcher();
                }
            }) 
        </script>
    
[/code]


CC BY-SA 4.0
2019-09-11T05:44:59.290
58984
2019-09-19T06:43:40.187
2019-09-19T06:43:40.187
32986
12297
question
javascript vue.js firebase
vue.jsでfirebaseのデータベースの変更にもリアクティブに反応させられるものでしょうか？


コールバックでのthis束縛が原因でしたら、setWatcher内で一旦`const self =
this;`のように変数に保存しておいてコールバックでは`self.message =
...`のようにするか、モダンブラウザを使える場合はアロー関数にするかします。

[code]

                    setWatcher: function ()
                    {
                        var ref = firebase.database().ref('/users/' + userID + '/members');
                        ref.on('value', (snapshot) =>
                        {
                            this.members = snapshot.val();
                            console.log(members);
     　 　　　　　　　　　　　app.$forceUpdate();
                        });
                    }
    
[/code]


CC BY-SA 4.0
2019-09-12T04:22:09.300
59007
2019-09-12T04:22:09.300
241
58984
answer