<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
v-forでは、users.address.streetを使用しました。
アドレス[1, 2]をusersListに渡し、Vue がv-for経由で項目を解析すると、## の各番号を読み取ろうとします。 ＃アドレスストリート＃＃＃。は
NOTE未定義です。unknownのプロパティにアクセスしようとすると、発生したエラーが発生します。: v-for がエラーをスローせずに
また、イテレータにaddressのない項目を解析できるようにしたい場合は、users を使用できます。 address.streetはusers.address?.streetに置き換えられます。ドキュメント:null 合体演算子。
users
という名前を付けると、このコードを変更する必要がある自分や他の開発者が
usersとは何かについて混乱する可能性があるため、名前を付けないでください。userという名前を付ける必要があります (例:v-for="usersList のユーザー" :key="user.id")。ただし、数値の場合はaddress.streetプロパティにアクセスできないという事実は変わりません。