时间戳

首页 > 解决方案 > 数组有 10 个代表球员的对象，我试图在 Vue.js 中循环显示来自第 1 队的 5 名球员。我做对了吗？

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

问题描述

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 原则。

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

标签： javascriptvue.jsvuejs2

解决方案

你可以重构一下。

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

改成：

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

推荐阅读