通过在表格中打印来读取实时 Firebase 数据库的问题

Question

我使用以下值创建了一个 Firebase 实时表：表：tutorial-vue-eb404 词根：其他儿童年份、作者、出版商、标题 使用 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')

最后我创建了 app.vue 文件

<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-form 循环来打印字符串“打印证明元素等于我的数组中的元素数量时，Realtime Firebase 离开了这条线

empty 使用 Microsoft Edge 我检测到以下错误：

[Vue 警告]：属性或方法“游戏”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。 如何将 Games 的值传递给 tebella？我总是收到一个明显的错误 我附上截图 非常感谢

No values

Answer 1

data() {
return {
   gameTypes: GameTypeEnum.properties,
   gamePlatforms: PiattaformaEnum.properties,
   fields: ['Titolo', 'SoftwareHouse', 'Tipo', 'Piattaforma', ' '],
   datas : [1,2,3,4],
   valore : "La mia lista",
   games: [], // <------ ADD GAMES FOR BINDING
}

更多信息： https://vuefire.vuejs.org/vuefire/#why

你好！ ;)