I’ve a vue page & vue component. The vue Page, is getting data via Firebase and passing hte object as a prop to a component. When accessing the prop, within the components template area, I don’t get any errors. But when accessing the same prop in the script setup, I get ReferenceError. Could you help me understand what I am doing wrong?
Vue Page:
<script setup lang="ts">
import { getProfile, profile } from '/@src/composable/useProfiles'
const params = new URL(location.href).searchParams.get('id')
onMounted(async () => {
getProfile(params);
})
</script>
<template>
<div class="page-content-inner">
<Core-MyProfile v-if="!params" />
<Core-UserProfile v-if="params" :profile="profile"/>
</div>
</template>
Vue Component:
<script setup lang="ts">
import { computed, ref, onMounted } from "vue";
const props = defineProps({
profile: {
type: Object,
required: true,
},
})
const sellPoints = props.profile.tribute.sell.current
const timePoints = props.profile.tribute.time.current
const usePoints = props.profile.tribute.use.current
const totalPoints = computed(
() => sellPoints+timePoints+usePoints
);
</script>
Errors:
runtime-core.esm-bundler.js:38 [Vue warn]: Invalid prop: type check failed for prop "profile". Expected Object, got Undefined
at <CoreUserProfile key=1 profile=undefined >
at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/profile?id=FC9gNTJ7D2hMaBcna9ILTGyxB3E2" >
at <BaseTransition mode="out-in" appear=false persisted=false ... >
at <Transition name="fade-fast" mode="out-in" >
at <RouterView>
at <HomeLayout>
at <Profile onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <BaseTransition mode="out-in" appear=false persisted=false ... >
at <Transition name="fade-slow" mode="out-in" >
at <RouterView>
at <App>
---
runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of setup function
at <CoreUserProfile key=1 profile=undefined >
at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/profile?id=0TCIgQZxy5YJqyXNMZQqkBQhZv13" >
at <BaseTransition mode="out-in" appear=false persisted=false ... >
at <Transition name="fade-fast" mode="out-in" >
at <RouterView>
at <HomeLayout>
at <Profile onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <BaseTransition mode="out-in" appear=false persisted=false ... >
at <Transition name="fade-slow" mode="out-in" >
at <RouterView>
at <App>
---
Core-UserProfile.vue:12 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'tribute')
at setup (Core-UserProfile.vue:12:34)
at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
at setupStatefulComponent (runtime-core.esm-bundler.js:7165:29)
at setupComponent (runtime-core.esm-bundler.js:7120:11)
at mountComponent (runtime-core.esm-bundler.js:5473:13)
at processComponent (runtime-core.esm-bundler.js:5448:17)
at patch (runtime-core.esm-bundler.js:5038:21)
at mountChildren (runtime-core.esm-bundler.js:5234:13)
at mountElement (runtime-core.esm-bundler.js:5143:17)
at processElement (runtime-core.esm-bundler.js:5115:13)