Estoy teniendo un problema, tengo desarrollado una app donde tiene un login. Una vez logueado te lleva al perfil de usuario, pero siempre me aparece la información del usuario anterior logueado, solamente se actualiza cunado realizo cambio en el script y luego refresca de forma automática el servidor de Vuejs y ahí recién aparece con la información del usuario logueado en ese momento. También cuando recién inicio la app no me reconoce el usuario logueado en ese momento, recién cuando actualizo la pagina lo reconoce.
1) Alguien sabe como actualizar un div cada cierto tiempo con VueJS 2) Como hago para que me reconozca el usuario al inicio de la template perfil cuando el usuario es logueado y redirigido al template.
Perfil.vue
<template>
<div id='perfil'>
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<a href="#" @click="logout">Logout</a>
<a href="#" @click="datos">DATOS</a>
<div class="col-sm-8 center text-center cardclass">
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="card">
<div class="card-header">
<h3>Registra gratis</h3>
</div>
<div class="card-body">
<form @submit.prevent="registrarVariable">
<div class="form-group">
<input type="text" id="Variablenom" class="form-control" placeholder="Nombre de la Variable" v-model="Variable.Variablenom">
</div>
<div class="form-group row">
<label for="example-date-input" class="col-2 col-form-label">Nacimiento</label>
<div class="col-10">
<input class="form-control" type="date" value="" v-model="Variable.Variable_nacimiento" name="Variable_nacimiento" id="Variable_nacimiento">
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="sexo" v-model="Variable.sexo">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Registrar</button>
</div>
</form>
</div>
<p v-if="errors.length">
<b>Por favor corrige los siguientes errores : </b>
<ul>
<li v-for="er in errors">{{ er }}</li>
</ul>
</p>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="width: 18rem;">
<div class="card-header">
Mis Variables
</div>
<ul class="list-group list-group-flush" id="Variablecomp">
<li v-for="m in Variabledb "
class="list-group-item" v-bind:key="m['.key']">
{{m.Variablenom}}
<span class="delete">
<a href="#" @click="eliminarVariable(m)"><i class="fas fa-trash"></i></a>
<a href="#" data-toggle="modal" data-target="#myModal" ><i class="fas fa-edit"></i></a>
<a href="#" ><i class="fas fa-share-alt-square"></i></a>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import firebase,{ auth } from 'firebase'
import mdb from '../config'
import toastr from 'toastr'
import Vue from 'vue'
import admin from 'firebase-admin'
import VueSession from 'vue-session'
import Router from 'vue-router'
let Variablesdb = mdb.ref('Variables');
let usuariosdb = mdb.ref('usuarios');
var vm = this;
var user = firebase.auth().currentUser;
var name,email,photoUrl,usersid,Variablesd;
if (user == '[object Object]') {
name = user.displayName;
email = user.email;
photoUrl = user.photoURL;
usersid = user.uid;
Variablesd = mdb.ref('Variables').child(usersid).child('Variable');
console.log(" 1 LOG : "+Variablesd);
}else{
Variablesd = mdb.ref('Variables').child('Variable');
console.log(" 1 ERROR : "+Variablesd);
}
firebase.auth().onAuthStateChanged(function(user,request) {
if (user) {
if (user == '[object Object]') {
name = user.displayName;
email = user.email;
usersid = user.uid;
Variablesd = mdb.ref('Variables').child(usersid).child('Variable');
console.log(" 2 LOG : "+Variablesd);
}else{
Variablesd = mdb.ref('Variables').child('Variable');
console.log(" 2 ERROR : "+Variablesd);
}
}
});
export default {
name: 'perfil',
firebase:{
usuarios : usuariosdb,
Variables : Variablesdb,
Variabledb:Variablesd
},
data () {
return {
errors:[],
Variable:{
Variablenom:'',
Variable_nacimiento:'',
sexo:'',
iduser:'',
}
}
},
methods:{
registrarVariable(e){
this.errors = [];
if(!this.Variable.Variablenom){
toastr.error('Debes colocar el nombre de tu Variable');
this.errors.push('Debes colocar el nombre de tu Variable');
}
else if(!this.Variable.Variable_nacimiento){
toastr.error('Debes colocar la fecha de nacimiento de tu Variable');
this.errors.push('Debes colocar la fecha de nacimiento de tu Variable');
}else if(!this.Variable.sexo){
toastr.error('Debes colocar el sexo de tu Variable');
this.errors.push('Debes colocar el sexo de tu Variable');
}else{
var user = firebase.auth().currentUser;
var self = this
let usersid = user.uid;
this.Variable.iduser=usersid
Variablesdb.child(usersid).child('Variable').push(this.Variable).key;
this.Variable.Variablenom='',
this.Variable.Variable_nacimiento='',
this.Variable.sexo='',
this.Variable.iduser='',
toastr.success('Variable agregada correctamente');
}
},
logout(){
firebase.auth().signOut().then(()=>this.$router.replace('login'));
},
datos(){
var user = firebase.auth().currentUser;
if (user != null) {
user.providerData.forEach(function (profile) {
console.log("Sign-in provider: " + profile.providerId);
console.log(" Provider-specific UID: " + profile.uid);
console.log(" Name: " + profile.displayName);
console.log(" Email: " + profile.email);
console.log(" Photo URL: " + profile.photoURL);
console.log("ID : "+user.uid);
});
}
},
eliminarVariable(Variable){
if(confirm('Quieres elimnar de la lista?')){
Variablesdb.child(Variable['.key']).remove();
toastr.success('eliminado');
}
},
editarVariable(Variable){
Variablesdb.child(Variable['.key']).updated({ edit:true });
toastr.success('Guardado');
},CancelEditarVariable(Variable){
Variablesdb.child(Variable['.key']).updated({ edit:false });
toastr.success('Cancelador');
},metodoOnBlur(Variable){
const chields = Variablesdb.child(Variable['.key']).child('iduser');
return chields
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.delete{
margin-left:40%;
}
.cardclass{
margin-top: 5%;
margin-bottom: 5%;
}
.col-center{
float: none;
margin-left: auto;
margin-right: auto;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
export default
y por eso tienes vision del usuario anterior logeado. Prueba a meter todo es código en methods o en created, según lo necesites y a ver q te sale