UsersPage.vue:
- 姓名:{{user.name}}, 用户名: {{user.username}},邮编: {{user.address.street}}
und App.vue:
C'est La Vue
Wenn ich jedoch „usersList“ in ein beliebiges Array mit einer beliebigen Anzahl von Elementen ändere (z. B. usersList:[1,2]), werden die Daten immer noch im richtigen Format angezeigt, jedoch in der Konsole des Browsers Folgender Fehler tritt auf:
Uncaught TypeError: Eigenschaften von undefiniert können nicht gelesen werden (liest „Straße“) unter UsersPage.vue:19:149 bei renderList (runtime-core.esm-bundler.js:2894:22) bei Proxy._sfc_render (UsersPage.vue:19:163) bei renderComponentRoot (runtime-core.esm-bundler.js:902:44) bei ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5615:57) bei ReactiveEffect.run (reactivity.esm-bundler.js:187:25) bei example.update (runtime-core.esm-bundler.js:5729:56) bei setupRenderEffect (runtime-core.esm-bundler.js:5743:9) bei mountComponent (runtime-core.esm-bundler.js:5525:9) bei ProcessComponent (runtime-core.esm-bundler.js:5483:17)
Warum erhalte ich diese Fehlermeldung, obwohl die Daten korrekt gerendert werden und die Adresse in https://jsonplaceholder.typicode.com/users vorhanden ist?
在你的
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属性的事实。