I've a simple vuejs app, connected to firebase, the v-for in the child component was working perfectly until I implemented authentication with firebase and the vue router.
Now its broken :(
Authentication happens fine, but the items from the query are not being there anymore (undefined).
Firebase credentials are good and the database herself has data on the selected path.
this is 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)
});
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>
Fire base config :
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();
auth.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>
and finally the child component displaying on successful auth and pulling data from the firebase path
<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>
Tried different code on the firebase object that should return the data, nothing worked.
Well, tried on clean blank vuejs project, failed again.
BUT worked again by supressing all Users in the authentication tab in firebase console !!