Vuejs Passing Data through the same component - vue.js

Question

Im a noob in vuejs and i want to pass some data : profile that you can find inside of created() into
<span v-if="isLoggedIn">{{this.profile.username}}</span>
I know i'm missing some basics behind how vue works but im still learnig:)
<template>
<v-card class="mx-auto" color="dark" dark>
<div>
<v-app-bar clipped-left dark app>
<v-app-bar-nav-icon class="grey--text" #click="drawer= !drawer"></v-app-bar-nav-icon>
<v-toolbar-title class="grey--text">
<span class="font-weight-light">anime</span>
<span>Art</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<span v-if="isLoggedIn">hi{{profile.username}}</span>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon to="/login">
<v-icon>mdi-account-outline</v-icon>
</v-btn>
<v-btn icon v-if="isLoggedIn">
<v-icon v-on:click="logout">mdi-logout-variant</v-icon>
</v-btn>
</v-app-bar>
</div>
<v-navigation-drawer app expand-on-hover clipped v-model="drawer">
<v-divider></v-divider>
<v-list nav>
<v-list-item v-for="item in items" :key="item.title" :to="item.path" link>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-card>
</template>
<script>
import firebase from "firebase";
// import db from "#/Firebase/firebaseInit";
export default {
data() {
return {
profile: {},
name: "navbar",
isLoggedIn: false,
currentUser: false,
drawer: false,
items: [
{ title: "Anime Home", icon: "mdi-view-dashboard", path: "/" },
{
title: "Trends",
icon: "mdi-chart-line-stacked",
path: "/trends"
},
{ title: "Save", icon: "mdi-bookmark", path: "/save" },
{
title: "Profile",
icon: "mdi-badge-account-horizontal",
path: "/profile"
},
{ title: "About", icon: "mdi-label", path: "/about" }
],
right: null
};
},
created() {
this.profile = {username:'hello'}
var user = firebase.auth().currentUser;
// var name, email,uid;
//, photoUrl, emailVerified
if (user != null) {
this.isLoggedIn = true;
this.profile = {
username: user.displayName,
useremail: user.email,
userid: user.uid,
photoUrl: user.photoURL,
emailVerified: user.emailVerified
};
console.log(profile.username);
// The user's ID, unique to the Firebase project. Do NOT use
// this value to authenticate with your backend server, if
// you have one. Use User.getToken() instead.
}
// console.log(user)
},
methods: {
logout: function() {
firebase
.auth()
.signOut()
.then(function() {
// Sign-out successful.
if (!firebase.auth().currentUser) {
alert("Signed out successfuly ");
}
})
.catch(function(error) {
// An error happened.
alert(error.message);
});
this.isLoggedIn = false;
this.$router.go({ path: this.$router.path });
}
}
};
</script>

Answer 1

in your html :
<span v-if="isLoggedIn">{{profile.username}}</span>
in your script
<script>
import firebase from "firebase";
export default {
data() {
return {
profile: {},
//all your stuff
},
created() {
var user = firebase.auth().currentUser;
if (user != null) {
this.isLoggedIn = true;
this.profile = {
username:user.displayName,
useremail :user.email,
userid:user.uid,
photoUrl : user.photoURL,
emailVerified: user.emailVerified
}
}
// console.log(user)
},
methods: {//all your stuff }
};
</script>