javascript - 我在循环中有一个函数，它接受当前循环的匹配并返回具有特定名称的参与者。如何避免重复？

Question

无法将我的整个问题都放在标题中，因此我也将其添加到此处。

我目前有一个循环，它为每场比赛创建一个 div 元素，我想在该 div 中显示 10 名比赛参与者之一的信息。为此，我使用了一个函数，该函数返回具有特定名称的参与者的对象。但是，正如您在下面看到的，每次我想访问该参与者的属性时，我都必须为每个属性一次又一次地使用该函数。

我认为这不是正确的做法，对吗？我使用 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
}

显然，如果此函数不在循环中，我只会保存参与者对象然后访问它，但是，由于它在循环中，我不知道这将如何发生。

Answer 1

使用一个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>