Vuejs Passing Data through the same component

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>

jcoleau · Accepted Answer · 2020-04-14 00:45:40Z

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>

answered Apr 14, 2020 at 0:45

jcoleau

1,20010 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Lynn Over a year ago

hey, it says that profile is not defined when i tried it with this.profile and added profile to data.Updated my code up there

Lynn Over a year ago

yes, i updated my code on my post and i declared it exaclty like profile: {},

jcoleau Over a year ago

I don't know, I tried on one of my app and It displays it, I will keep looking.

jcoleau Over a year ago

is firebase.auth().currentUser an asynchronous function ? If yes it could be why profile is not initialized.

Lynn Over a year ago

i added this.profile = {username:'hello'} on top of var user = firebase.auth().currentUser; and i had the same error

|

Collectives™ on Stack Overflow

Vuejs Passing Data through the same component

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related