Vue에서 배열이 초기화되고 출력이 표시될 때 "정의되지 않은 속성을 읽을 수 없습니다"라는 오류가 발생하는 이유는 무엇입니까?

Question

<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>

Answer 1

당신의 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 속성에 액세스할 수 없다는 사실은 바뀌지 않습니다.