vue и firebase TypeError: Невозможно прочитать свойство 'groups' из неопределенного

Question

Я не понимаю, почему мои группы массивов не определены.TypeError: Невозможно прочитать свойство 'groups' из неопределенного

Но я возвращаю группы массивов в data ()!

Я новичок в Firebase :) Кто-то может мне помочь?

<template>
    <div class="bet">
         <h1>bet part</h1>
         
    </div>
   
</template>

<script>
import firebase,{ functions } from 'firebase'


var config = {
    ...
  };

  let app = firebase.initializeApp(config);

  let db = app.database();

    
export default {
    name: 'Bet',
    data () {
        return {
            groups: []
        }
    },
    created(){
    db.ref('groups').on("value", function(snapshot) {
        snapshot.forEach(function(data) {
        let group = data.val()
        group.key = data.key
        this.groups.push(group)
      });
    })
  }
}
</script>

Answer 1

this внутри обратного вызова не является экземпляром Vue.Вы можете сделать трюк:

 created() {
    var vm = this
    db.ref('groups').on("value", function(snapshot) {
        snapshot.forEach(function(data) {
        let group = data.val()
        group.key = data.key
        vm.groups.push(group)
      });
  })

или использовать вместо него функцию стрелки!

 created() {
    db.ref('groups').on("value", (snapshot) => {
        snapshot.forEach(function(data) {
        let group = data.val()
        group.key = data.key
        this.groups.push(group)
    });
  })