[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.

Watch or read your tutorial carefuly again. Your mistake is easy to fix, you have just missed something :) — Adam Orlov
Well, i have watched the tutorial 3 or 4 times the only things that i miss is the line import './firebase.js' in the main.js file. After adding it the problem is not solved :( I think that somethong t do with the versions of Vue and VueFire, taht i use, thay are newer than that in the tutorial it seems, but still haven't find nothing to help me :) — Christian Citterio
@AdamOrlov found what i've missed on the web, but now there is another problem the buttons on the table template are not rendering :( — Christian Citterio
The slot name you are trying to use is probably wrong slot=" ". I don't think that Bootstrap-Vue would make a slot named " " "empty string" ;-) Check in the docs for the right name. — Adam Orlov

Raymond Camden Raymond Camden · Accepted Answer · 2019-12-08T16:29:39

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.

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

2 Answers