为什么在Vue中，当数组初始化并显示输出时，会出现“无法读取未定义的属性”的错误？

Question

<p>我有两个 vue 文件，App.vue 和一个组件UsersPage.vue。</p> <p>UsersPage.vue:</p> <pre class="brush:php;toolbar:false;"><脚本> 导出默认值{ 数据：（）=>（{ 用户列表：[] }), 方法：{ 异步创建用户列表（）{ this.usersList =等待fetch(“https://jsonplaceholder.typicode.com/users”).then((response)=>response.json()); } }, 创建（）{ this.createUsersList(); } } </脚本> <模板>

<li v-for="usersList 中的用户" :key=“user.id”><b>姓名：</b>{{user.name}},<b>用户名：</b> {{user.username}},<b>邮编：</b> {{user.address.street}} </ul> </模板></pre> <p>和App.vue:</p> <pre class="brush:php;toolbar:false;"><脚本> 从“./components/UsersPage.vue”导入UsersPage 导出默认值{ 成分： { 用户页面， }, 数据：() => ({ currentPage: "首页", }), 方法： { 显示主页() { this.currentPage = "首页"; }, 显示登录页面() { this.currentPage = "登录"; }, }, }; </脚本> <模板> <标头类=“标头”> <span class="logo"> 这就是风景 </span> <nav class=“nav”> 首页 登录</a> </nav> </标题> <用户页面/>> </模板></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>

Answer 1

在你的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属性的事实。