我有一个简单的 vuejs 应用程序，连接到 firebase，子组件中的 v-for 运行良好，直到我使用 firebase 和vue路由器实现身份验证。
现在它坏了:(
身份验证正常，但查询中的项目不再存在（未定义）。
Firebase 凭据很好，并且数据库本身在所选路径上有数据。
这是 main.js
import 'onsenui';
import Vue from 'vue';
import VueOnsen from 'vue-onsenui';
import VueFire from 'vuefire';
import VueRouter from 'vue-router'
import firebaseui from 'firebaseui';
import router from './router'
import {connection} from './firebaseconfig';
require('onsenui/css-components-src/src/onsen-css-components.css');
require('onsenui/css/onsenui.css');
require('firebaseui/dist/firebaseui.css');
import App from './App.vue';
Vue.use(VueOnsen);
Vue.use(VueFire);
Vue.use(VueRouter);
var app = new Vue({
router,
created() {
connection.auth().onAuthStateChanged((user) => {
if(user) {
this.$router.push('/home')
} else {
this.$router.push('/auth')
}
});
} ,
el: '#app',
template: '<app></app>',
components:{
App
} ,
render: h => h(App)
});
应用程序.vue
<template>
<router-view></router-view>
</template>
<script>
import auth from './components/auth'
import dashboard from './components/dashboard'
import home from './components/homePage'
import stores from './components/storesPage'
import social from './components/socialPage'
import settings from './components/settingsPage'
export default {
data() {
return {
currentPage: 'auth',
// pages: ['home', 'stores', 'settings' , 'social'],
pages: {
'dashboard' :
{ 'name' : 'dashboard' , 'icon' : 'md-view-dashboard' } ,
'home' :
{ 'name' : 'home' , 'icon' : 'md-view-home' } ,
'Stores' :
{ 'name' : 'stores' , 'icon' : 'md-store' } ,
'Social' :
{ 'name' : 'social' , 'icon' : 'md-share' } ,
'account' :
{ 'name' : 'account' , 'icon' : 'md-account-o' } ,
'auth' :
{ 'name' : 'auth' , 'icon' : 'md-settings' } ,
},
openSide: false
};
},
components: {
auth,
dashboard,
home,
stores,
settings ,
social
}
}
</script>
消防基地配置：
import firebase from 'firebase';
const config = {
apiKey: "xxxxxxxxxx",
authDomain: "xxx",
databaseURL: "xxx",
projectId: "yyyyy",
storageBucket: "yyyyyyy",
messagingSenderId: "yyyyy"
};
export const FireBconfig = config;
export const connection = firebase.initializeApp(config);
export const db = connection.database();
身份验证.vue
<template lang="html">
<div id="firebaseui-auth-container">
</div>
</template>
<script>
import firebase from 'firebase';
import firebaseui from 'firebaseui'
import {FireBconfig} from '../firebaseconfig';
export default {
name: 'auth',
mounted() {
var uiConfig = {
signInSuccessUrl: '/success',
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
]
};
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);
},
}
</script>
最后是子组件显示成功的身份验证并从 firebase 路径中提取数据
<template>
<v-ons-page style="background-color:grey">
<custom-toolbar class="topbarback" :title="'Home'" :action="toggleMenu">
</custom-toolbar>
<v-ons-pull-hook :action="loadItem" @changestate="state = $event.state">
<span v-show="state === 'initial'"> Pull to refresh </span>
<span v-show="state === 'preaction'"> Release </span>
<span v-show="state === 'action'"> <v-ons-progress-bar indeterminate></v-ons-progress-bar> </span>
</v-ons-pull-hook>
<v-ons-row >
<v-ons-col v-bind:key="item" v-for="item in items" width="33%">
<div style="padding:5px;margin: 0px;border:solid 2px #E4E4E4;height:240px;vertical-align:middle;display:table-cell;background-color:#FFF;position: relative;">
<div style="text-align:center">
<ons-input @change="checkboxclick" :input-id="item.ItemID" v-model="selected" style=" position: absolute; top: 10px; right: 10px;" type="checkbox" ></ons-input>
<label :for="item.ItemID">
<span class="price">{{item.CurrentPriceAmount}} €</span>
<span class="watchers">10</span>
<img tappable style="width:85%;max-height:85%" class="item-thum" v-bind:src="item. PictureDetailsGalleryURL" />
</label>
</div>
<div class="item-title"> <span style="font-size:9px;background-color:#FFF">{{item.title}}</ span><br /><br /></div>
</div>
</v-ons-col>
</v-ons-row>
<v-ons-speed-dial position="bottom right" direction="up"
:visible="spdVisible"
:open.sync="spdOpen"
>
<v-ons-fab :style="spdStyle">
<v-ons-icon style="font-size:8px" icon="md-format-valign-top"><span style=" font-size:12px;font-family: 'Open Sans', sans-serif;">{{counter}}</span></v-ons-icon>
</v-ons-fab>
<v-ons-speed-dial-item v-for="(icon, name) in shareItems"
:style="spdStyle"
@click="$ons.notification.confirm(`Share on ${name}?`)"
>
<v-ons-icon :icon="icon"></v-ons-icon>
</v-ons-speed-dial-item>
</v-ons-speed-dial>
</v-ons-page>
</template>
<script>
import customToolbar from './toolbarHome'
import {db} from '../firebaseconfig';
export default {
data :
function() {
return {
spdVisible: false,
spdOpen: false,
spdStyle: {
backgroundColor: this.$ons.platform.isIOS() ? '#4282cc' : null
} ,
items : [1,2,3] ,
counter : 0 ,
selectedItems : [] ,
state: 'initial',
selected : [],
shareItems: {
'With Relist': 'md-swap-alt' ,
'Facebook': 'md-arrow-split',
}
}
},
firebase: {
items : {
source: db.ref('users/buisine/stores/ebay/red/items')
}
},
props: ['toggleMenu' , 'itemsRef'],
components: { customToolbar } ,
methods: {
checkboxclick(event) {
if(event.target.checked===true)
{
this.counter++;
this.selectedItems.push(event.target.id);
}
else
{
this.selectedItems.splice( this.selectedItems.indexOf(event.target.id) , 1);
this.counter--;
}
},
loadItem(done) {
setTimeout(() => {
this.items = [...this.items, this.items.length + 1];
done();
}, 1500);
},
}
}
</script>
在应该返回数据的firebase对象上尝试了不同的代码，但没有任何效果。