Exploring VUE and Firebase: Uncovering the Process of Retrieving User Profiles from Real-Time Database

After retrieving the user profile from the Realtime database, I noticed that when there are multiple accounts, it also fetches the profile of the second user.

Below, you can see data from two users. However, my objective is to extract the details of the user who is currently logged in, i.e., the currentUser.

The corresponding ID belongs to the currentUser.

https://i.stack.imgur.com/x2ltr.png

This image showcases the Realtime database:

https://i.stack.imgur.com/QuwNv.png

Here's a snippet from my Profile.vue page:

<div class="container" v-for="profileData of profile" :key="profileData['.key']">
            <div v-if="seen" class="row">
              <div class="col">
                <div class="card card-border" style="width: 30rem;">
                  <div class="card-body">
                    <h4 class="card-title text-center mb-4">Personal information</h4>
                      <p class="card-text">ID: {{profileData.CurrentUser}}</p>
                      <p class="card-text">First name: {{profileData.firstName}}</p>
                      <p class="card-text">Last name: {{profileData.lastName}}</p>
                      <p class="card-text">Phone number: {{profileData.phoneNumber}}</p>
                      <p class="card-text">Adress: {{profileData.adress}}</p>
                      <p class="card-text">Citizenship: {{profileData.citizenship}}</p>
                      <p class="card-text">Personal email: {{profileData.personalEmail}}</p>
                  </div>
                </div>
              </div>
              <div class="col"></div>
              <div class="col">
                <div class="card card-border" style="width: 30rem;">
                  <div class="card-body">
                    <h4 class="card-title text-center mb-3">Business information</h4>
                      <p>Company name: {{profileData.companyName}}</p>
                      <p>Chamber Of Commerce Number: {{profileData.chamberOfCommerceNumber}}</p>
                      <p>Street: {{profileData.street}}</p>
                      <p>House number: {{profileData.houseNumber}}</p>
                      <p>ZIP code: {{profileData.zipCode}}</p>
                      <p>Location: {{profileData.location}}</p>
                      <p>Company email: {{profileData.companyEmail}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

In order to address this issue, I implemented an if/else statement within the created() section below.

Find the script here:

<script>
import firebase from "firebase";
import { db } from '../../config/db';

export default {
  data() {
    return {
      email: "",
      password: "",
      profileData: [],
      isHidden: true,
      seen: true,
      isLoggedIn: false
    }
  },
  firebase: {
    profile: db.ref('profile')
  },
  methods: {
    resetPassword() {
      const auth = firebase.auth();
      auth.sendPasswordResetEmail(auth.currentUser.email).then(() => {
        console.log('Email send');
        // Email sent.
      }).catch((error) => {
        // An error happened.
        console.log(error);
      });
    }
  },
  created() {
    if(firebase.auth().currentUser) {
      this.isLoggedIn = true;
      this.currentUser = firebase.auth().currentUser.email;
    }
    var user = firebase.auth().currentUser;
    if (this.user == this.profileData.CurrentUser) {
      this.seen = true;
    } else {
      this.seen = false;
    }
  }
};
</script>

Within the Profile.vue page, the add function has been incorporated:

AddProfile() {
            console.log(JSON.stringify(this.profileData) + this.currentUser)
            this.$firebaseRefs.profile.push({
                firstName: this.profileData.firstName,
                lastName: this.profileData.lastName,
                phoneNumber: this.profileData.phoneNumber,
                adress: this.profileData.adress,
                citizenship: this.profileData.citizenship,
                personalEmail: this.profileData.personalEmail,
                companyName: this.profileData.companyName,
                chamberOfCommerceNumber: this.profileData.chamberOfCommerceNumber,
                street: this.profileData.street,
                houseNumber: this.profileData.houseNumber,
                zipCode: this.profileData.zipCode,
                location: this.profileData.location,
                companyEmail: this.profileData.companyEmail,
                CurrentUser: this.currentUser
            })
            this.profileData.firstName = '';
            this.profileData.lastName = '';
            this.profileData.phoneNumber = '';
            this.profileData.adress = '';
            this.profileData.personalEmail = '';
            this.profileData.companyName = '';
            this.profileData.chamberOfCommerceNumber = '';
            this.profileData.street = '';
            this.profileData.houseNumber = '';
            this.profileData.zipCode = '';
            this.profileData.location = '';
            this.profileData.companyEmail = '';
            this.CurrentUser = '';
            window.scrollTo(0,0, 0,0);
            console.log('Added to database');
            /* Waiting for 2 seconds here */
            this.$router.push('/internship')
        },
firebasevue.jsfirebase-realtime-database

Answer №1

It appears that you are currently utilizing Vuefire.

According to the Vuefire documentation, when you set up

firebase: {
  profile: db.ref('profile')
},

You are implementing a declarative binding on the Realtime Database node profile, resulting in a retrieval of all its child nodes.

If your intention is solely to display the current user's node, you can opt for the programmatic binding approach which involves the following steps:

<template>
  <div class="home">
    {{user}}
    <ol></ol>
  </div>
</template>

<script>
import { db } from "../firebase";
const profile = db.ref("profile");
export default {
  name: "demo",
  data() {
    return {
      user: null,
      id: null
    };
  },
  watch: {
    id: {
      immediate: true,
      handler(id) {
        this.$rtdbBind("user", profile.child(id));
      }
    }
  },
  created() {

    if (firebase.auth().currentUser) {
      this.id = currentUser.uid;
    }
  }
};
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the `lang` attribute be used in a `style` tag to specify the CSS preprocessor language for VueJS? Are there any disadvantages to using this method?

Occasionally, I notice people incorporating code like this: <style lang="scss"> ... </style> <style lang="stylus"> ... </style> I checked the documentation for the style tag and found that lang is not a valid a ...

javascriptcssvue.jssassstylus

The dropdown item in Tailwindcss is unexpectedly flying off the edge of the screen rather than appearing directly under the dropdown button

Currently, I am developing an application using Rails, Vue, and TailwindCss 1.0+ I am facing an issue while creating a dropdown menu for my products. When I click on the dropdown button, the items in the dropdown fly off to the edge of the screen instead ...

htmlcssvue.jstailwind-css

Controlling the back DIV while maintaining overlapping layers

I successfully positioned my right hand content on top of the leaflet map in the background using CSS properties like position and z-index. However, I am looking for a way to make the overlapping div not only transparent but also non-interactive while stil ...

htmlcssvue.jsleaflet

An exciting tutorial on creating a animated dropdown using vueJS

I've set up a navigation menu with mouseover and mouse leave events to toggle a dropdown by changing a boolean value. Now, I'm trying to apply different animations to the list items in the dropdown compared to the surrounding box, but I'm f ...

cssvue.jstransition

What could be preventing the background image from displaying properly?

I had the idea to create a game where players have to flip cards to reveal what's on the back, but I'm struggling to get the background image to display properly. As a newcomer to Vue, I'm not sure if I made a mistake somewhere. My intuition ...

javascripthtmlcssvue.js

Improving Vue Component on Navigation

I am facing an issue with my navbar where I have two versions. Version 1 features a white text color, while Version 2 has black text. The need for two versions arises due to some pages having a white background, hence the requirement for black text. Bot ...

javascriptcssvue.jsvuejs2

What are some creative ways to design the selected tab?

In my Vue parent component, I have multiple child components. There are several elements that toggle between components by updating the current data. The issue is that I am unsure how to indicate which tab is currently active. I've tried various li ...

javascripthtmlcssvue.js

Choose the option for overseeing safaris

Hello there! I need some help with Safari. Can you please guide me on how to disable the arrows? https://i.stack.imgur.com/1gzat.png ...

javascriptcssvue.js

How to conceal sections of a webpage until a child component is successfully loaded with vue

I am currently working on a Single Page Application using Vue. The default layout consists of some HTML in the header, followed by an abstract child component that is injected into the page. Each child component has a loader to display while the data is be ...

javascripthtmlcssvue.js

The issue with Bootstrap Vue scrollspy arises when trying to apply it to dynamic data. Upon closer inspection, it becomes evident that the elements are activating and highlighting one by

In my application built with Vue, content is displayed based on the component type (Header, Text, Image) in a JSON file. I am looking to implement scroll spy functionality specifically for the Header component containing headings. I have attempted to use ...

cssvue.jsvue-componentbootstrap-vuescrollspy

Displaying content conditionally - reveal a div based on user selection

I have a dropdown menu and need to determine whether to display a specific div using the value selected via v-if. <select class="custom-select custom-select-sm" id="lang"> <option value="1">English</option> <option value="2">Sv ...

csstwitter-bootstrapvue.jsconditional-rendering

How can I reset a CSS position sticky element using JavaScript?

I have created a page where each section fills the entire screen and is styled using CSS position: sticky; to create a cool layered effect. Check it out here: https://codesandbox.io/s/ecstatic-khayyam-cgql1?fontsize=14&hidenavigation=1&theme=dark ...

javascripthtmlcssvue.js

I'm struggling to understand how to interpret this. The v-tab function seems to be generating a button with various properties, but I'm unsure which specific property is related to

The V-tab below generates the button known as the right one on the v-app-bar: https://i.stack.imgur.com/DzNmq.png <v-tab :to="'/demo'" active-class="text--primary" class=&quo ...

javascriptcssvue.jsbutton

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

I am experiencing an issue in my Vue CLI app where a component with the position: sticky CSS property is being partially hidden under the top of the browser when scrolling down, but works correctly when scrolling up. This behavior is also observed on my Ga ...

javascriptcssvue.jscss-positionvuex

The CSS styling of Vuetify TreeView does not support text wrapping

I'm having trouble getting the long text in this CodePen snippet to break and wrap properly. It extends off screen, rendering the append button unclickable. I've experimented with various CSS rules but haven't found a solution yet. Check ou ...

cssvue.jsvuetify.js

Vuetify Container with a set maximum width that remains fixed

I recently started developing a web application using Vue.js and Vuetify (https://vuetifyjs.com/en/). Currently, I have a basic layout with 3 columns. However, I noticed that the width of these columns is restricted to a maximum of 960px due to some defau ...

cssvue.jsvuetify.js

Utilize data attributes in VueJS to dynamically style elements

Is there a way to utilize the data() values within the <style>..</style> section? I have experimented with different combinations (using/omitting this, with/without {{brackets}}, etc.) but haven't been successful. Interestingly, when I man ...

cssvue.jsstyles

Is there a way to assign a specific color to individual users in a chat?

I have successfully implemented a chat feature using Pusher, but now I want to customize the appearance by changing the color of the username for the logged-in user when they are active in the conversation. Currently, both my username and another user&apos ...

javascripthtmlcsslaravelvue.js

Get rid of the box-shadow on the Vuetify element

I currently have a special-table component that includes a box shadow when the row is expanded https://i.stack.imgur.com/8zgjp.png I am aiming for the removal of the box-shadow effect. After inspecting the console-style tab, I identified https://i.stac ...

cssvue.jsvuejs2vue-componentvuetify.js

How can I align two div buttons at the top and bottom to appear on the left and right sides?

How can I change the position of two buttons from top and bottom to left and right as shown in the second image? I am utilizing Floating Vue, so the buttons will be contained within a div. Is it feasible to adjust their position accordingly? Check out th ...

htmlcssvue.js