I am working with two vue files, namely App.vue and a component called UsersPage.vue.
UsersPage.vue:
<script>
export default {
data:() =>({
usersList : []
}),
methods:{
async createUsersList(){
this.usersList = await fetch("https://jsonplaceholder.typicode.com/users").then((response)=> response.json());
}
},
created(){
this.createUsersList();
}
}
</script>
<template>
<ul>
<li v-for="user in usersList" :key="user.id"><b>Name:</b>{{user.name}}, <b>UserName:</b> {{user.username}},<b>ZipCode:</b> {{user.address.street}} </li>
</ul>
</template>
and App.vue:
<script>
import UsersPage from "./components/UsersPage.vue"
export default {
components: {
UsersPage,
},
data: () => ({
currentPage: "Home",
}),
methods: {
showHomePage() {
this.currentPage = "Home";
},
showLoginPage() {
this.currentPage = "Login";
},
},
};
</script>
<template>
<header class="header">
<span class="logo">
<img src="@/assets/vue-heart.png" width="30" />C'est La Vue
</span>
<nav class="nav">
<a href="#" @click.prevent="showHomePage">Home</a>
<a href="#" @click.prevent="showLoginPage">Login</a>
</nav>
</header>
<UsersPage/>
</template>
Although the output is displayed correctly without any errors when I run this, changing the usersList to an array with elements such as usersList:[1,2], still renders the data properly but results in the following error in the browser console:
Uncaught TypeError: Cannot read properties of undefined (reading 'street')
at UsersPage.vue:19:149
at renderList (runtime-core.esm-bundler.js:2894:22)
at Proxy._sfc_render (UsersPage.vue:19:163)
at renderComponentRoot (runtime-core.esm-bundler.js:902:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5615:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
at instance.update (runtime-core.esm-bundler.js:5729:56)
at setupRenderEffect (runtime-core.esm-bundler.js:5743:9)
at mountComponent (runtime-core.esm-bundler.js:5525:9)
at processComponent (runtime-core.esm-bundler.js:5483:17)
This raises the question why this error occurs even though the data is rendered correctly and the address field does exist in https://jsonplaceholder.typicode.com/users?