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