Mengapa dalam Vue, apabila tatasusunan dimulakan dan output dipaparkan, saya mendapat ralat "Tidak boleh membaca harta yang tidak ditentukan"?
P粉642919823
2023-08-28 23:38:03
<p>我有两个vue文件，App.vue和一个组件UsersPage.vue。</p>
<p>UsersPage.vue:</p>
<pre class="brush:php;toolbar:false;"><script>
eksport lalai {
data:() =>({
Senarai pengguna : []
}),
kaedah:{
async createUsersList(){
this.usersList = await fetch("https://jsonplaceholder.typicode.com/users").then((response)=> response.json());
}
},
dicipta(){
this.createUsersList();
}
}
</skrip>
<template>
<ul>
<li v-for="pengguna dalam senarai pengguna" :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>
import UsersPage daripada "./components/UsersPage.vue"
eksport lalai {
komponen: {
Halaman Pengguna,
},
data: () => ({
Halaman semasa: "首页",
}),
kaedah: {
showHomePage() {
this.currentPage = "首页";
},
showLoginPage() {
this.currentPage = "登录";
},
},
};
</skrip>
<template>
<kelas pengepala="pengepala">
<span class="logo">
<img src="@/assets/vue-heart.png" lebar="30" />C'est La Vue
</span>
<nav class="nav">
<a href="#" @click.prevent="showHomePage">首页</a>
<a href="#" @click.prevent="showLoginPage">登录</a>
</nav>
</header>
<Halaman Pengguna/>
</template></pre>
<p>当我运行这个程序时，没有错误，并且输出仍然显示。Walau bagaimanapun, apabila saya menukar usersList kepada mana-mana tatasusunan dengan sebarang bilangan elemen (cth. <code>userslist:[1,2]</code>), data masih dipaparkan dalam format yang betul, tetapi dalam konsol penyemak imbas The ralat berikut berlaku: </p>
<pre class="brush:php;toolbar:false;">Uncaught TypeError: Tidak dapat membaca sifat yang tidak ditentukan (membaca 'jalan')
di UsersPage.vue:19:149
di renderList (runtime-core.esm-bundler.js:2894:22)
di Proxy._sfc_render (UsersPage.vue:19:163)
di renderComponentRoot (runtime-core.esm-bundler.js:902:44)
di ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5615:57)
di ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
at instance.update (runtime-core.esm-bundler.js:5729:56)
di setupRenderEffect (runtime-core.esm-bundler.js:5743:9)
di mountComponent (runtime-core.esm-bundler.js:5525:9)
di processComponent (runtime-core.esm-bundler.js:5483:17)</pre>
<p>Mengapa saya mendapat ralat ini, walaupun data dipaparkan dengan betul dan alamatnya wujud dalam https://jsonplaceholder.typicode.com/users? </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dalam
v-for中，你使用了users.address.streetanda.Bila anda akan
[1, 2]传递给usersList并且Vue通过v-for解析这些项时，它尝试读取每个数字的address.street.Oleh kerana ia adalah nombor, anda akan mendapat ralat yang anda hadapi apabila
address是undefined。当你尝试访问undefinedmenggunakan sebarang sifat padanya.NOTA : Jika anda inginkan
v-for能够解析没有address的项而不抛出错误，你可以将users.address.street替换为users.address?.streetanda.Dokumentasi: pengendali penggabungan batal.
Selain itu, anda tidak sepatutnya menamakan iterator anda
users，因为这可能会让你或其他需要修改该代码的开发人员对users是什么感到困惑。你应该将其命名为user（例如：v-for="user in usersList" :key="user.id").Tetapi itu tidak mengubah hakikat bahawa apabila ia adalah nombor, anda tidak boleh mengakses harta
address.streetnya.