為什麼在Vue中，當陣列初始化並顯示輸出時，會出現「無法讀取未定義的屬性」的錯誤？
<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>