為什麼在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屬性的事實。