Vue で、配列が初期化されて出力が表示されると、「未定義のプロパティを読み取れません」というエラーが発生するのはなぜですか?
<p>App.vue と 1 つのコンポーネントUsersPage.vue という 2 つの vue ファイルがあります。</p>
<p>UsersPage.vue:</p>
<pre class="brush:php;toolbar:false;"><script>
デフォルトのエクスポート {
データ:() =>({
ユーザーリスト: []
})、
メソッド:{
async createUsersList(){
this.usersList = await 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}} </li>
</ul>
</template></pre>
<p>和App.vue:</p>
<pre class="brush:php;toolbar:false;"><script>
UsersPage を「./components/UsersPage.vue」からインポートします。
デフォルトのエクスポート {
コンポーネント: {
ユーザーページ、
}、
データ: () => ({
現在のページ: "首页",
})、
メソッド: {
showHomePage() {
this.currentPage = "首页";
}、
showLoginPage() {
this.currentPage = "登录";
}、
}、
};
</スクリプト>
<テンプレート>
<ヘッダークラス=「ヘッダー」>
<スパンクラス="ロゴ">
<img src="@/assets/vue-heart.png"幅= "30" />セ ラ ビュー
</span>
<ナビクラス="ナビ">
<a href="#" @click.prevent="showHomePage">首页</a>
<a href="#" @click.prevent="showLoginPage">登录</a>
</ナビ>
</ヘッダー>
<ユーザーページ/>
</template></pre>
<p>このプログラムを実行すると、問題はなく、表示されます。ただし、usersList を任意の数の要素を持つ配列 (例: <code>usersList:[1,2]</code>) に変更すると、データは引き続き正しい形式で表示されますが、ブラウザーのコンソールでは次のエラーが発生します: </p>
<pre class="brush:php;toolbar:false;">Uncaught TypeError: 未定義のプロパティを読み取れません ('street' を読み取ります)
UsersPage.vue:19:149
renderList で (runtime-core.esm-bundler.js:2894:22)
Proxy._sfc_render で (UsersPage.vue:19:163)
renderComponentRoot で (runtime-core.esm-bundler.js:902:44)
ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5615:57)
ReactiveEffect.run で (reactivity.esm-bundler.js:187:25)
instance.update (runtime-core.esm-bundler.js:5729:56)
setupRenderEffect で (runtime-core.esm-bundler.js:5743:9)
mountComponent で (runtime-core.esm-bundler.js:5525:9)
processComponent (runtime-core.esm-bundler.js:5483:17)</pre> で
<p>データは正しくレンダリングされ、アドレスが https://jsonplaceholder.typicode.com/users に存在するにもかかわらず、このエラーが発生するのはなぜですか? </p>
