<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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
당신의
v-for中，你使用了users.address.street.언제
[1, 2]传递给usersList并且Vue通过v-for解析这些项时，它尝试读取每个数字的address.street.숫자이므로 해당 속성을
address是undefined。当你尝试访问undefined사용할 때 발생하는 오류가 발생합니다.참고 :
v-for能够解析没有address的项而不抛出错误，你可以将users.address.street替换为users.address?.street.문서: 무효 병합 연산자.
또한 반복자 이름을 지정하면 안 됩니다
users，因为这可能会让你或其他需要修改该代码的开发人员对users是什么感到困惑。你应该将其命名为user（例如：v-for="user in usersList" :key="user.id").하지만 숫자인 경우
address.street속성에 액세스할 수 없다는 사실은 바뀌지 않습니다.