for 루프 내부의 필터링 배열이 경고를 발생시킵니다. VueJS

Question

이것이 문제가되거나 잘못된 것이 있는지 확실하지 않습니다. VueJS를 사용하면 v-for 내부에 필터링 기능이있어 작동하지만 콘솔에 경고가 표시됩니다. this은 문제의 최소한의 예입니다.

위에서 볼 수 있듯이 다른 배열의 관계형 데이터를 필터링해야하므로 배열을 반환하는 getClan() 함수를 사용해야하므로 첫 번째 요소의 데이터를 사용해야합니다. 지금까지 너무 좋아하지만, V-에 대한 루프 내가이 경고 가지고 끝날 때 :

[Vue warn]: Error in render function: "TypeError: this.clans.filter(...)[0] is undefined"  

메시지는 어떤 이유로, 크롬과 파이어 폭스 콘솔에 표시가의 codepen 로컬 콘솔에 표시되지 않습니다

을, 나는 추측하고있어 이것은 어쨌든 경고와 분리되어 있습니다.

경고는 for 루프의 끝에서만 발생하며 더 큰 데이터 세트로 시도 할 때 동일한 일이 발생합니다.

계산 된 속성을 사용하는 것에 대해 생각하지만 그 것에 인수를 전달할 수는 없습니다.

Answer 1

배열 필터가 아무 것도 아닌 경우 문제가 발생합니다. 존재하지 않는 반환 값의 첫 번째 인덱스에 액세스하려고 시도합니다. codepen 또는 jsfiddle은 (SO의 조각 도구가 모든 것을하는 것처럼 자체에 포함 된 것이 아니라 외부 서비스에 따라 질문 해주세요, 나중에 참조

getClan(x) { 
    var clan = this.clans.filter(clan=>clan.id==x) 
    if (clan.length > 0) { 
     return clan[0].name 
    } else { 
     return "Peasant" 
    } 
}