javascript - 数组有 10 个代表玩家的对象，我试图在 Vue.js 中循环并显示第 1 队的 5 名玩家。我做对了吗？

Question

this.match.details.participants 包含一个包含 10 个代表玩家的对象的数组。每个球员都有一个属性teamId，用于确定他是在第一队还是第二队。我正在尝试循环所有参与者，并在页面的第 1 列中显示第一个团队，在页面的第 2 列中显示第二个团队。

我基本上已经弄清楚了，但我很好奇我的实现是否正确以及是否有更好的替代方案。目前我是这样做的:

<div v-for='friendly in friendlyTeam'>
    {{ friendly }}
</div>
<div v-for='enemy in enemyTeam'>
    {{ enemy }}
</div>

data(){
    return {
        match: null
    }
},
computed: {
    friendlyTeam(){
        let friendlyTeamId = this.match.mainParticipant.teamId; // id is either 100 or 200
        let friendlyTeam = this.match.details.participants.filter(value => value.teamId === friendlyTeamId);

        return friendlyTeam;
    },
    enemyTeam(){
        let enemyTeamId = 0;
        let friendlyTeamId = this.match.mainParticipant.teamId; // id is either 100 or 200
        if (friendlyTeamId == 100) {
            enemyTeamId = 200
        } else if (friendlyTeamId == 200) {
            enemyTeamId = 100
        }
        let enemyTeam = this.match.details.participants.filter(value => value.teamId === enemyTeamId );

        return enemyTeam;
    }
}

这会返回一个由 5 个对象组成的数组，代表友方队伍中的玩家。这工作得很好，但是，似乎我必须复制并粘贴整个计算属性并对其进行一些更改才能获得敌方队伍，这将打破 DRY 原则。

除了我所做的之外，还有更好的选择吗？使用计算属性仅提取我想要的对象然后循环它们是一个好主意吗？

Answer 1

你可以重构一下。

if (friendlyTeamId == 100) {
        let enemyTeamId == 200
    } else if (friendlyTeamId == 200) {
        let enemyTeamId == 100
 }

更改为:

let enemyTeamId = friendlyTeamId === 100 ? 200 : 100