[英][Vue warn]:Property or method is not defined on the instance but referenced during render
[英][Vue warn]: Property or method "games" is not defined on the instance but referenced during render
我在 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 警告]:屬性或方法“游戲”未在實例上定義,但在渲染期間被引用。
我已經做了一些研究,但沒有找到任何可以幫助我解決的問題。
該錯誤指出您的模板引用了未定義的變量games
。 如果您查看您的代碼,您會發現您告訴gamesRef
使用gamesRef
來引用游戲數據。 我相信如果你只是改變你的模板來使用gamesRef
而不是games
,你會很高興。
問題解決了,我在 data() 屬性中遺漏了一個初始化:) 只需要在 data() 的返回中添加游戲:[]。
謝謝大家的幫助:)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.