Question

我在组件中收到了一系列体育赛事：

[{ ligue: "champions league", event: "psg - varsovia", scoreteam1: 1, scoreteam:2},{ ligue: "world cup", event: "belgium - england", scoreteam1: 1, scoreteam:2},{ ligue: "champions league", event: "madrid - fc bruge", scoreteam1: 3, scoreteam:2},{ ligue: "champions league", event: "milan - dortmund", scoreteam1: 1, scoreteam:2},{ ligue: "world cup", event: "japan - danemark", scoreteam1: 1, scoreteam:5}]

我想这样获取“合法”的所有事件的列表：

冠军联赛： * PSG-瓦尔索维亚 *马德里-FC布鲁基 *米兰-多特蒙德

世界杯： *比利时-英国 *日本-丹麦人

现在我像这样循环遍历我的足球名单，因此每次我重复“队长”的名字：

<section v-for="(loop,i) in soccerlist" :key="i" ><header>  {{ loop.ligue }}</header><div> {{loop.event}} {{ loop.scoreteam1 }} {{ loop.scoreteam2 }}</section>

所以我想从“ ligue”中获得所有匹配项，我该如何使用vue js做到这一点？

Answer 1

使用computed属性将数组分类为联赛可能会更好。例如：

computed: {
  sortedGames() {
    return this.soccerlist.reduce((acc, game) => {
      if (acc[game.ligue]) acc[game.ligue].push(game);
      else acc[game.ligue] = [game];
      return acc;
    }, {})
  }
}

这将返回一个对象，每个游戏按ligue分组。然后，您可以v-for="ligue in sortedGames"并从那里去。

在vue.js中对列表进行排序

1 个答案: