Vuetify 데이터 테이블 헤더 배열은 빈 하위 연결을 허용하지 않습니다.

Question

Rails 백엔드에서 localAuthority 속성을 전달하는 Vuetify를 사용하는 데이터 테이블이 있습니다. 빈 하위 연결(중첩 속성)을 전달할 때까지는 모든 것이 잘 작동합니다. 이 경우 "카운티":

으아아아

위 예에서는 모든 레코드에 카운티 소속(belongs_to)이 있는 한 작동합니다. 그러나 레코드에 연결된 "카운티"가 없으면 다음 오류가 표시됩니다.

으아아아

다음과 같은 조건문을 추가하는 등 다양한 방법을 시도했습니다.

으아아아

하지만 아무것도 작동하지 않는 것 같습니다.

Answer 1

Codepen의 <v-data-table> 코드를 바탕으로 기본 테이블 항목 슬롯을 자신의 코드로 덮어쓰고 있는 것을 확인했습니다.

귀하의 오류는 코드의 다음 부분에서 발생합니다:

으아악

첫 번째 문자열을 보세요. #item.county.name 是 v-slot:item.county.name 的缩写形式，来自 headers 배열의 문자열 중 하나:

으아악

그래서 오류가 발생하지 않습니다. item에 county이 포함되어 있지 않더라도 이 부분은 vuetify 라이브러리에서 올바르게 구문 분석됩니다.

위 코드의 세 번째 문자열에서 오류가 발생합니다. county의 name이 존재하는지 확인하지 않고 인쇄하려고 합니다. 이것이 ...无法读取未定义的属性... 오류가 발생하는 이유입니다.

다음과 같이 문제를 해결할 수 있을 것 같습니다.

으아악

물론, 이 경우 카운티 링크를 숨겨야 한다면 태그에 v-if （或 v-show）添加到 a를 넣어도 됩니다.

저는 또한 일부 정적 데이터를 사용하여 작은 Codepen을 만들었습니다. 이 플레이그라운드의 item.name.text 슬롯을 살펴보세요. 유사한 객체 연관을 이해하는 데 도움이 될 것입니다.