为什么在Vue中，当数组初始化并显示输出时，会出现“无法读取未定义的属性”的错误？
<p>我有两个vue文件，App.vue和一个组件UsersPage.vue。</p>
<p>UsersPage.vue:</p>
<pre class="brush:php;toolbar:false;"><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>姓名:</b>{{user.name}}, <b>用户名:</b> {{user.username}},<b>邮编:</b> {{user.address.street}} </li>
</ul>
</template></pre>
<p>和App.vue:</p>
<pre class="brush:php;toolbar:false;"><script>
import UsersPage from "./components/UsersPage.vue"
export default {
components: {
UsersPage,
},
data: () => ({
currentPage: "首页",
}),
methods: {
showHomePage() {
this.currentPage = "首页";
},
showLoginPage() {
this.currentPage = "登录";
},
},
};
</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">首页</a>
<a href="#" @click.prevent="showLoginPage">登录</a>
</nav>
</header>
<UsersPage/>
</template></pre>
<p>当我运行这个程序时，没有错误，并且输出仍然显示。然而，当我将usersList更改为任何具有任意数量元素的数组（例如<code>usersList:[1,2]</code>），数据仍然以正确的格式显示，但在浏览器的控制台中会出现以下错误：</p>
<pre class="brush:php;toolbar:false;">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)</pre>
<p>为什么会出现这个错误，即使数据正确地呈现并且地址也存在于https://jsonplaceholder.typicode.com/users中？</p>
1
857
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
在你的
v-for中，你使用了users.address.street。当你将
[1, 2]传递给usersList并且Vue通过v-for解析这些项时，它尝试读取每个数字的address.street。因为它们是数字，它们的
address是undefined。当你尝试访问undefined的任何属性时，你会得到你正在遇到的错误。注意：如果你希望你的
v-for能够解析没有address的项而不抛出错误，你可以将users.address.street替换为users.address?.street。文档： nullish coalescing operator。
另外，你不应该将你的迭代器命名为
users，因为这可能会让你或其他需要修改该代码的开发人员对users是什么感到困惑。你应该将其命名为user（例如：v-for="user in usersList" :key="user.id"）。但这并不改变当它是一个数字时，你无法访问它的
address.street属性的事实。