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

Question

我有两个vue文件，App.vue和一个组件UsersPage.vue。UsersPage.vue:&lt;script&gt;exportdefault{data:()=&gt;({usersList:[]}),methods:{asynccreateUsersList(){this.usersList=awaitfetch("https://jsonp

P粉087074897 · Answer

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