루프 내에는 현재 루프되어 있는 일치를 취득하여 특정 이름의 참가자를 반환하는 함수가 있습니다.중복을 방지하는 방법

루프 내에는 현재 루프되어 있는 일치를 취득하여 특정 이름의 참가자를 반환하는 함수가 있습니다.중복을 방지하는 방법

제 질문 전체를 제목에 넣을 수 없었기 때문에 여기에 추가하겠습니다.

저는 현재 경기마다 div 요소를 생성하는 루프를 가지고 있으며, 그 div에 10명의 경기 참가자 중 1명의 정보를 표시하고 싶습니다.이를 위해 특정 이름을 가진 참가자의 오브젝트를 반환하는 기능을 사용합니다.다만, 아래와 같이, 그 참가자의 자산에 액세스 하고 싶을 때마다, 속성 마다 몇번이나 그 기능을 사용할 필요가 있습니다.

저는 그게 올바른 행동 방침이라고 생각하지 않아요, 그렇죠?프런트 엔드 프레임워크로 Vue.js를 사용하고 있습니다.

현재 다음과 같은 코드를 가지고 있습니다.

루프:

<div v-for='match in summonerMatches.matches'>
    {{ findParticipant(match).championId }}
    {{ findParticipant(match).spell1Id }}
    {{ findParticipant(match).spell12d }}
</div>

기능:

findParticipant(match){
    let participantId = match.details.participantIdentities.find(x => x.player.summonerName === this.summonerInfo.name).participantId;
    let participant = match.details.participants.find(x => x.participantId === participantId)

    return participant
}

이 함수가 루프에 있지 않다면 당연히 참가자 객체를 저장하고 액세스합니다만, 루프 내에 있기 때문에, 어떻게 되는지는 알 수 없습니다.

를 사용하다computed배열의 모든 참가자를 저장하는 속성입니다.예를 들어...

data() {
...
},
computed: {
    participants() {
        return this.summonerMatches.matches.map(match => this.findParticipant(match))
    }
}

그런 다음 템플릿에서 루프 오버할 수 있습니다.participants대신..

<div v-for="participant in participants">
    {{ participant.championId }}
    {{ participant.spell1Id }}
    {{ participant.spell12d }}
</div>

이미 "참가자" 정보가 로드된 개체 목록을 반복해야 합니다.

핸드폰으로 타이핑을 하고 있는데 설명이 가능한지..

가장 좋은 방법은 백엔드 필터링으로 쿼리를 실행하고 중복된 오브젝트 참가자를 로드하는 것입니다.뷰는 인쇄만 하고 처리를 하지 않습니다.

div를 복제하지 않으려면 속성 ID에 있는 "participant"의 ID를 사용하여 div를 만들 수 있습니다. 이렇게 하면 HTML 페이지에 이미 있는지 확인하는 것만으로 새 div를 만들지 않아도 됩니다.

언급URL : https://stackoverflow.com/questions/57299771/i-have-a-function-inside-a-loop-that-takes-the-currently-looped-match-and-return