Currently, I am working on developing a posting platform using Vue and Firebase. When a user creates a post, their username will be showcased alongside the post. An example would be:
Created by user1
Everything is functioning smoothly in this aspect.
Now, my focus lies on building a user profile page where users can view the name and email of the creator.
The issue I'm facing is that the email and name are not being displayed as intended.
This snippet represents part of the PostDetails page:
<router-link :to="{ name: 'UserDetails', params: { userId: playlist.userId } }" class="username">
Created by {{ playlist.userName }}
</router-link>
UserDetails page:
<template>
<div>{{ user.displayName }}</div>
</template>
<script>
import getDocument from "@/composables/getDocument";
export default {
props: ["userId"],
setup(props) {
const { error, document } = getDocument("users", props.userId);
const userName = document.value.displayName
return {
error,
userName,
};
},
};
</script>
<style></style>
To check out the website itself, feel free to visit: Website
Furthermore, here is what the database structure looks like:
Summary
My objective is to enable users to click on a username within a post, navigate to the userDetails page, and view both the user's name and email associated with that specific post. The link functionality has already been implemented successfully.