[Vue 警告]：属性或方法“游戏”未在实例上定义，但在渲染期间引用

Posted 2023-02-23

【中文标题】[Vue 警告]：属性或方法“游戏”未在实例上定义，但在渲染期间引用

【英文标题】：[Vue warn]: Property or method "games" is not defined on the instance but referenced during render

【发布时间】：2020-04-01 20:24:14

【问题描述】：

我在使用 vue.js 时遇到问题。我是新手，看不出代码有什么问题。

我的 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');

我的 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');

我的 App.vue 组件

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

代码来自学习 Vue.js 的教程，编译和启动后一切正常，但没有从 FireBase DB 读取数据。相反，此错误显示在控制台中： [Vue 警告]：属性或方法“游戏”未在实例上定义，但在渲染期间被引用。

我做了一些研究，但没有找到任何帮助。

【问题讨论】：

再次仔细观看或阅读您的教程。你的错误很容易解决，你只是错过了一些东西:)

好吧，我已经看了 3 到 4 次教程，我唯一想念的是 main.js 文件中的 import './firebase.js' 行。添加后问题没有解决:(我认为我使用的 Vue 和 VueFire 版本与我使用的版本无关，它们似乎比教程中的更新，但仍然没有找到任何可以帮助我的东西： )

@AdamOrlov 在网上找到了我错过的内容，但现在还有另一个问题是表格模板上的按钮没有呈现:(

您尝试使用的插槽名称可能是错误的slot=" "。我不认为 Bootstrap-Vue 会创建一个名为 " " “空字符串”的 slot ;-) 检查文档以获取正确的名称。

【参考方案1】：

问题已解决，我在 data() 属性中缺少初始化 :) 只需在 data() 的返回中添加游戏：[]。

感谢大家的帮助:)

【参考方案2】：

错误表明您的模板引用了一个未定义的变量games。如果您查看您的代码，您会发现您告诉 firebase 使用 gamesRef 来引用游戏数据。我相信如果您只是将您的模板更改为使用gamesRef 而不是games，您会很高兴的。