I have a page that displays all the profiles from my database. What I want to achieve is, when someone clicks on an individual profile, they should be directed to a profile page showing the rest of the data corresponding to the id clicked. However, I am facing issues in making it work. Below is the JavaScript file to fetch individual profiles.
import { projectFirestore } from "../Firebase/Config";
import { ref } from "vue"
const getPBasic = (id) => {
const PBasic = ref(null)
const error = ref(null)
const load = async () => {
try{
let res = await projectFirestore.collection('Basic').doc(id).get()
PBasic.value = {...res.data(), id: res.id}
console.log(PBasic.value)
}
catch (err){
error.value = err.message
console.log(error.value)
}
}
return { PBasic, error, load}
}
export default getPBasic
Here's the Vue page where I want the data to be displayed after clicking on a profile from the previous page.
<script>
import getPBasic from "../Composables/getPBasic";
const {PBasic, error, load} = getPBasic(route.params.id);
load();
export default {
name: "Slider",
data() {
return {
images: [
"/src/assets/sample-1.jpg",
"/src/assets/sample-2.jpg",
"/src/assets/sample-3.jpg",
"/src/assets/sample-4.jpg"
],
currentIndex: 0
};
},
methods: {
next: function() {
this.currentIndex += 1;
},
prev: function() {
this.currentIndex -= 1;
}
},
computed: {
currentImg: function() {
return this.images[Math.abs(this.currentIndex) % this.images.length];
}
}
};
</script>
<template>
<div v-if="error">{{ error }}</div>
<div v-if="PBasic" class="PBasic">
<br><br>
<p>{{ PBasic.Name }} </p>
<p>{{ PBaic.Age }} </p>
</div>
<div v-else>
<spinner/>
</div>
This is just a snippet of what I have done so far. If anyone has any ideas or suggestions, I would truly appreciate it. Thank you.