I am facing an issue when trying to pass an object into a child component using props in the Composition API setup function of Vue. Instead of utilizing 'Abe', I want to run a query from firebase based on the displayName property of the user. As a newcomer to Vue, I could really use some guidance!
<template>
<div v-if="user">
<Process :user="user"/>
</div>
<div v-else>
<h1>Loading user</h1>
</div>
</template>
<script>
import Process from '../views/Process.vue'
import getUser from '@/composables/getUser'
export default {
components: { Process },
setup(){
const { user } = getUser();
return {user}
}
}
</script>
Although using user within the setup function results in an undefined error, it works correctly when placed at the top of the template.
<template>
<p>Process Payroll</p>
<h1>{{ user.displayName }} </h1>
<h1>{{ docs }} </h1>
</template>
<script>
// import getUser from '@/composables/getUser'
import { ref, onMounted, watch } from 'vue'
import { projectFirestore, projectAuth } from '@/firebase/config'
import { useRouter, useRoute } from 'vue-router'
export default {
props: ['user'],
setup() {
// watch(()=> user, () => returnUser())
const lastName = ref("");
const firstName = ref("");
const docs = ref("");
const returnUser = async () => {
const res = await projectFirestore
.collection("users")
.where("displayName", "==", "Abe")
.get();
const lastNameList = res.docs.map(d => `Abe ${d.data().lastName}`)
console.log(lastNameList)
console.log(user)
console.log(user.displayName)
docs.value = lastNameList;
}
onMounted(returnUser)
return { docs, returnUser};
},
}
</script>