[Vue warn]: Property or method "games" is not defined on the instance but referenced during render

Question

I'm having problems whit vue.js. I'm new to this and can't see what is wrong in the code.

My main.js

import Vue from 'vue';
import App from './App.vue';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import { rtdbPlugin } from 'vuefire';


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


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

My firebase.js

import firebase from 'firebase/app';
import 'firebase/database';

const app = firebase.initializeApp({ ... });

export const db = app.database();
export const gamesRef = db.ref('Games');

My App.vue component

<template>
    <b-container>
        <div class="page-header">
            <h2 class="text-center">Game Manager</h2>
            <br/>
        </div>
        <b-row>
            <b-col lg="4">
                <b-form v-on:submit.prevent="onSubmit()">
                    <b-form-group label="Titolo" label-for="titolo">
                        <b-form-input type="text" id="titolo" name="titolo" v-model="newGame.Titolo" v-on:change="onChange()"></b-form-input>
                    </b-form-group>
                    <b-form-group label="Software House" label-for="softwarehouse">
                        <b-form-input type="text" id="softwarehouse" name="softwarehouse" v-model="newGame.SoftwareHouse" v-on:change="onChange()"></b-form-input>
                    </b-form-group>
                    <b-form-group label="Tipo" label-for="tipo">
                        <b-form-select id="tipo" name="tipo" v-model="newGame.Tipo" :options="gameTypes"></b-form-select>
                    </b-form-group>
                    <b-form-group label="Piattaforma" label-for="piattaforma">
                        <b-form-select id="piattaforma" name="piattaforma" v-model="newGame.Piattaforma" :options="gamePlatforms"></b-form-select>
                    </b-form-group>

                    <b-btn type="submit" variant="primary" :disabled="submitDisabled">Aggiungi</b-btn>
                </b-form>
                <br/>
            </b-col>
            <b-col lg="8">
                <b-table :items="games" :fields="fields">
                    <template slot="Tipo" slot-scope="data">{{getGameType(data.item.Tipo)}}</template>
                    <template slot="Piattaforma" slot-scope="data">{{getPiattaforma(data.item.Piattaforma)}}</template>
                    <template slot=" " slot-scope="data">
                        <b-btn size="sm" variant="warning">X</b-btn>
                        <b-btn size="sm" variant="secondary">M</b-btn>
                    </template>
                </b-table>
            </b-col>
        </b-row>
    </b-container>
</template>

<script>
    import { gamesRef } from './firebase';
    import { gameTypeEnum, piattaformaEnum } from './models/game';

    export default {
        firebase: {
            games: gamesRef
        },
        data() {
            return {
                gameTypes: gameTypeEnum.properties,
                gamePlatforms: piattaformaEnum.properties,
                fields: ['Titolo', 'SoftwareHouse', 'Tipo', 'Piattaforma', ' '],
                newGame: {
                    Titolo: '',
                    SoftwareHouse: '',
                    Tipo: gameTypeEnum.FPS,
                    Piattaforma: piattaformaEnum.PC
                },
                submitDisabled: true
            };
        },
        methods: {
            getPiattaforma(value) {
                return this.gamePlatforms[value].text;
            },
            getGameType(value) {
                return this.gameTypes[value].text;
            },
            onSubmit() {
                gamesRef.push(this.newGame);
                this.newGame.Titolo = '';
                this.newGame.SoftwareHouse = '';
                this.submitDisabled = true;
            },
            onChange() {
                this.submitDisabled = this.SoftwareHouse === '' || this.Titolo === '';
            },
            onDelete(game) {
                gamesRef.child(game['.key']).remove();
            }

        }
    };
</script>

<style lang="scss">
    .page-header{
        background-color: #226622;
        color: #ffffff;
    }
    .page-header h2{
        padding-top: 8px;
    }
</style>

The code is from a tutorial to learn Vue.js, after compilation and launch is everithing Ok but no data is readed from the FireBase DB. Instead this error shows up in the console: [Vue warn]: Property or method "games" is not defined on the instance but referenced during render.

I have done some reaserch but find nothing to help me out with it.

Answer 1

The error states that your template refers to a variable, games , that isn't defined. If you look at your code, you can see you tell firebase to use gamesRef to refer to the games data. I believe if you just change your template to use gamesRef instead of games , you'll be good to go.

Answer 2

Problem Solved, i was missing a initialization in the data() properties :) It was only matter to add games: [], in the return of data().

Thanks all for help :)