Vue - 중첩된 개체의 데이터를 표시하려고 할 때 렌더에 오류가 발생했습니다.

Vue - 중첩된 개체의 데이터를 표시하려고 할 때 렌더에 오류가 발생했습니다.

나는 Vue에서 이상한 문제를 다루고 있다.테이블에 직원 명단을 표시하려고 합니다.종업원은 REST 서비스에 의해 제공되며, 응답은 다음과 같습니다(아래는 paginated List의 1개 항목입니다).

{
  "id": 10a,
  "code": 0000,
  "firstName": "John",
  "lastName": "Doe",
  "level": "WORKER",
  "specialization": {
    "id": 20,
    "name": "Default",
    "taem": {
      "id": 2,
      "name": "Builders",
      "system": false,
      "teamLead": null,
      "specializationDtos": null,
      "categoryDtos": null
    }
  },
  "team": {
    "id": 2,
    "name": "Builders",
    "system": false,
    "teamLead": null,
    "specializationDtos": null,
    "categoryDtos": null
  },
  "coachDto": null,
  "roles": [
    "DL"
  ]
}

Vue에서는 Vuex 액션을 사용하여 원시 데이터를 전처리하고 페이지 처리된 직원 목록을 반환하고 있습니다.그러면 다음 방법으로 표에 출력하려고 합니다.v-for다음과 같습니다.

<tr v-for="item in paginatedList" :key="item.id"
  v-on:click="selectRow(item)"
  v-bind:class="{selectedRow: selectedItem === item}"
>
  <td>{{item.id}}</td>
  <td>{{item.name}}</td>
  <td>{{item.team.name}}</td>
</tr>

그리고 여기서 실패한다.테이블이 표시되어도 팀 이름을 모르는 직원이 없는데 Vue에서 경고를 받습니다.

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

경고의 원인이 되는 코드 줄을 클릭하면 렌더링하려는 위치를 가리킵니다.{{item.team.name}}

나는 처음에 팀원이 빠진 직원이 단순히 표시되지 않는 것이라고 생각했다.이것을 확인하기 위해서, 다음의 회피책을 생각해 냈습니다.

<td>{{getTeamName(item.team)}}</td>

방법은 다음과 같습니다.

getTeamName(team) {
  return (team ? team.name : 'FAILED');
}

경고/오류는 사라지지만 실패한 팀을 가진 직원은 없습니다.이게 정확히 뭐가 문제죠?네스트된 오브젝트의 속성을 그렇게 표시할 수 있습니까, 아니면 피해야 합니까?

이 문제는 반복하는 개체에 아직 예상 데이터가 없지만 디버깅할 때 데이터가 있을 때 발생할 수 있습니다.약속에서 얻은 데이터를 사용할 때 가장 많이 발견됩니다.이 점을 염두에 두고 데이터가 올바르게 로드되었는지 확인하는 체크만 추가하면 됩니다.이것으로 충분합니다.

<tr v-for="item in paginatedList" :key="item.id"
  v-on:click="selectRow(item)"
  v-bind:class="{selectedRow: selectedItem === item}"
>
  <div v-if="item.team">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.team.name}}</td>
  </div>
</tr>

저는 보통dataLoadedfalse로 초기화된 컴포넌트의 프로펠트이지만 데이터 처리를 마치면 true로 설정됩니다.이러한 문제를 회피할 수 있습니다.그럼 내가 확인했지v-if="dataLoaded"내 컴포넌트 전체에 걸쳐서 말이야.

오브젝트에 팀 철자가 틀린 것 같습니다.

 "taem": {
      "id": 2,
      "name": "Builders",
      "system": false,
      "teamLead": null,
      "specializationDtos": null,
      "categoryDtos": null
    }

그래서 정의되지 않은 이름을 표현할 수 없는 것 같아요.

언급URL : https://stackoverflow.com/questions/48802726/vue-error-in-render-when-trying-to-display-data-from-nested-object