Mengapa dalam Vue, apabila tatasusunan dimulakan dan output dipaparkan, saya mendapat ralat "Tidak boleh membaca harta yang tidak ditentukan"?
<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>
