Проблемы с чтением баз данных Firebase в реальном времени с печатью в таблице

Question

Я создал таблицу Firebase RealTime со следующими значениями: Таблица: tutorial- vue -eb404 Root: год рождения, автор, издатель, название, используя npm Я создал свой проект, я выполнил настройку, создав Firebase . js

import Firebase from 'firebase/app'
import 'firebase/database'

const app = Firebase.initializeApp({
 
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
  


})  



export const db = app.database(); // recuperiamo il database

// Modifico il Database

db.ref("altro").child('anno').set(2070);
db.ref("altro").child('autore').set('Marvel');
db.ref("altro").child('titolo').set('Il mago di Oz');
db.ref("altro").child('casaeditrice').set('Maravel');


export const gamesRef = db.ref('altro') // recup rif alla collect.





   

//export const gamesRef = db.ref("altro").child('autore').set('Ada'); // Funziona

Я создал main. js

import Vue from 'vue'
import VueSimpleAlert from "vue-simple-alert";
import App from './App.vue'
import BootstrapVue from "bootstrap-vue"
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"
import './firebase'
import 'materialize-css'   
import 'materialize-css/dist/css/materialize.min.css'

import { rtdbPlugin } from 'vuefire'




Vue.use(VueSimpleAlert)
Vue.use(BootstrapVue)
Vue.use(rtdbPlugin)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Наконец я создал приложение. vue file

<script>
import { gamesRef } from './firebase'

import { GameTypeEnum, PiattaformaEnum,nuovofilm } from './models/game'



export default {
  firebase: {
    
    games: gamesRef
    

  },
  data() {
    return {
       gameTypes: GameTypeEnum.properties,
      gamePlatforms: PiattaformaEnum.properties,
      fields: ['Titolo', 'SoftwareHouse', 'Tipo', 'Piattaforma', ' '],
       datas : [1,2,3,4],

       valore : "La mia lista",
       
    
   
    
        
    }
  },
  methods: {
     getPiattaforma(value) {
      return this.gamePlatforms[value].text;
    },
    getGameType(value) {
      return this.gameTypes[value].text;
    },
    aggiungiFilm() {
      
            gamesRef.push(this.nuovoFilm);
            nuovofilm.titolo ="ciao";
             gamesRef.push(this.nuovoFilm);
             this.$alert(this.gameTypes[1].text);
              this.$alert(this.nuovofilm[1].text);
             //this.toastr.success("Film cancellato");
        }
  }
}
</script>

<template>
    <b-container>
   
    <div class="page-header">
      <h2 class="text-center">Game Manager</h2>
      <hr />
    </div>
    <div class="row">
    <!--form aggiunta film-->
    <div class="col s12 m4">
      <form v-on:submit.prevent="aggiungiFilm">
      <div class="input-field col s12">
         <input type="text" id="addtitolo" class="validate">
           <label for="addtitolo">Titolo</label>

          </div>
            <div class="input-field col s12">
             <input type="text" id="addtitolo">
           <label for="addtitolo">Locandina</label>
          </div> 
          <div class="input-field col s12">
                        <input type="text" id="addregista">
                        <label for="addregista">Regista</label>
                    </div>
                    <div class="input-field col s12">
                        <input type="number" id="addanno">
                        <label for="addanno">Anno</label>
                    </div>
                   
          <input type="submit" class="right waves-effect waves-light btn lime darken-1" value="Aggiungi Film">
              </form>
              <button type="button" class="btn btn-primary">Primary</button>
            </div> 
             <!--fine form aggiunta film-->
             <!--Tabella-->
             <div class="col s12 m8">
             <table class="table-responsive highlight striped ">
                    <thead>
                        <tr>
                            <th>Mark<i class="material-icons">arrow_drop_down</i></th>
                            <th>Titolo<i class="material-icons">arrow_drop_down</i></th>
                            <th>Locandina<i class="material-icons">arrow_drop_down</i></th>
                            <th>Regista <i class="material-icons">arrow_drop_down</i></th>
                            <th>Anno <i class="material-icons">arrow_drop_down</i></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
 <tr v-for="(gameone, index) in games":key="index"> 
  //In the cycle for video printing of all elements of the table firebase, title, author, years, publishing house 
  
  // //Does not work 
  
          <div id="titolo">{{gameone.titolo}}</div>
           <div id="titolo">{{gameone.anno}}</div>
            <div id="titolo">{{gameone.autore}}</div>
             <div id="titolo">{{gameone.casaeditrice}}</div>
              </tr>
            </tbody>
            </table>
             </div>
            </div>
   
  </b-container>

Но когда я пытаюсь использовать v-форму l oop, это должно вывести строку «Вывести элементы доказательства, равные количеству элементов, которые у меня есть в мой массив Realtime Firebase оставляет строку

пустой. В Microsoft Edge я обнаруживаю следующую ошибку:

[Vue warn]: свойство или метод "игры" не определено в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство. См .: https://vuejs.org/v2/guide/reactivity.html#Declaring -Reactive-Properties . Как передать значения Games в tebella? Я всегда получаю заметную ошибку, прикрепляю скриншот, спасибо большое

Нет значений