Vue에서 배열이 초기화되고 출력이 표시될 때 "정의되지 않은 속성을 읽을 수 없습니다"라는 오류가 발생하는 이유는 무엇입니까?
<p>저에게는 vue文件, App.vue 및 一个组件UsersPage.vue가 있습니다.</p>
<p>UsersPage.vue:</p>
<pre class="brush:php;toolbar:false;"><script>
기본값 내보내기 {
데이터:() =>({
사용자 목록: []
}),
행동 양식:{
비동기 createUsersList(){
this.usersList = fetch("https://jsonplaceholder.typicode.com/users").then((response)=> response.json());
}
},
만들어진(){
this.createUsersList();
}
}
</스크립트>
<템플릿>
-
<li v-for="usersList의 사용자" :key="user.id"> 이름:{{user.name}}, 사용자 이름: {{user.username}},<b>邮编:</b> {{user.address.street}} </li>
</ul>
</템플릿></pre>
<p>App.vue:</p>
<pre class="brush:php;toolbar:false;"><script>
"./comComponents/UsersPage.vue"에서 UsersPage를 가져옵니다.
기본값 내보내기 {
구성요소: {
사용자페이지,
},
데이터: () => ({
현재 페이지: "首页",
}),
방법: {
쇼홈페이지() {
this.currentPage = "금지"
},
쇼로그인페이지() {
this.currentPage = "登录"
},
},
};
</스크립트>
<템플릿>
<헤더 클래스="헤더">
<스팬 클래스="로고">
<img src="@/assets/vue-heart.png" 너비 = "30"; />C'est La Vue
</스팬>
<nav class="nav">
<a href="#" @click.prevent="showHomePage">首页</a>
<a href="#" @click.prevent="showLoginPage">登录</a>
</nav>
</헤더>
<사용자 페이지/>
</템플릿></pre>
<p>저희는 여행을 떠나며 没有错误, 并且输流仍然显示.그러나 usersList를 요소 수에 관계없이 임의의 배열(예: <code>usersList:[1,2]</code>)로 변경하면 데이터가 여전히 올바른 형식으로 표시되지만 브라우저 콘솔에는 다음 오류가 발생합니다: </p>
<pre class="brush:php;toolbar:false;">잡히지 않은 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.comComponentUpdateFn [fn으로] (runtime-core.esm-bundler.js:5615:57)
ReactiveEffect.run(reactivity.esm-bundler.js:187:25)
인스턴스 업데이트(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>
