I've encountered an issue while working on a Vue 3 app involving a component and its <User /> subcomponent.
Within App.vue:
<template>
<Navbar />
<Sidebar />
<Content
title="Users"
/>
<Footer />
</template>
<script>
import Navbar from './components/Navbar.vue'
import Content from './components/Content.vue'
import Sidebar from './components/Sidebar.vue'
import Footer from './components/Footer.vue'
export default {
name: 'App',
components: {
Navbar,
Content,
Sidebar,
Footer
},
data() {
return {
url: 'https://jsonplaceholder.typicode.com',
users: [],
}
},
async mounted() {
// Users
await this.axios.get(`${this.url}/users`).then((response) => {
if (response.data.code == 200) {
this.users = response.data.data;
console.log(this.users);
}
}).catch((errors) => {
console.log(errors);
});
}
}
</script>
Inside Navbar.vue:
<template>
<a class="navbar-brand" href="#">My App</a>
<User :users='users' />
</template>
<script>
import User from './User.vue'
export default {
name: 'Navbar',
components: {
User
}
}
</script>
In User.vue, I'm attempting to display the user's full name using {{ users.firstName }} {{ users.lastName }}, but encountering issues with typeof(users) returning object:
<template>
{{ users.firstName }} {{ users.lastName }}
</template>
<script>
export default {
name: 'User',
props: {
users: Object
}
}
</script>
The Issue
An error "Uncaught TypeError: Cannot read properties of undefined (reading 'firstName')" is showing in the console.