Question

我有一个简单的Vue应用程序，其结构如下：我有一个App.vue组件和Card.vue组件

在App.vue中，我创建了以下数据：

        {
          id: 1,
          name: "Frenkie de Jong",
          position: "midfielder",
          country: "The Netherlands",
          image: "frenkie_de_jong.jpg",
          value: 20000000,
          club_id: 2
        },
        {
          id: 2,
          name: "Mathijs de Ligt",
          position: "defender",
          country: "The Netherlands",
          image: "mathijs_de_ligt.jpg",
          value: 20000000,
          club_id: 2
        }....
      ],
      clubs: [
        { id: 1, name: "Liverpool", logo: "Liverpool.png" },
        { id: 2, name: "Ajax Amsterdam", logo: "ajax_amsterdam.png" }
      ...
      ]

我为每个玩家创建一张卡片，其中显示了所有相关信息（值，国家/地区等）。使用App.vue中的v-for已经可以使用此功能。

但是，现在我也想展示每个球员的俱乐部。俱乐部通过club_id链接到玩家。最佳做法是什么？

我正在考虑以下两个选项之一：

在App.vue中找到俱乐部的比赛：迭代所有球员，如果player.club_id == club.id，我们将球员和俱乐部发送到Card组件并创建新的卡片。
在Card.vue中找到俱乐部的比赛：遍历所有球员，并针对每个球员，将球员和所有俱乐部的清单发送到Card组件。然后，在Card.vue中，我需要创建一个函数来查找两者之间的匹配项。

（在性能方面）最好的方法是什么？还是有更好的选择？

谢谢！

耶罗恩

Answer 1

将俱乐部数据映射为对象，这样您就不必为每个玩家执行查找操作，它将为您提供O（1）时间而不是O（n）时间，例如，创建一个计算道具propdClubs并将其传递给玩家卡

mappedClubs(){
  return this.clubs.reduce((r,c) =>{
   r[c.id] = r
   return r
  },{})
}

在您的卡组件中，只需访问类似这样的俱乐部信息

<div> club name : {{ mappedClubs[player.club_id].name}} </div>

Answer 2

为避免第二次迭代，您可以做的一件事是为球杆使用Map。

data () {
 return {
  players: [/* ... */],
  clubs: new Map([
   [1, { name: "Liverpool", logo: "Liverpool.png" }],
   [2, { name: "Ajax Amsterdam", logo: "ajax_amsterdam.png" }]
  ])
 }
}

因此您可以使用此方法来获取俱乐部信息，具体取决于提供的clubId。

methods: {
  getClubById (clubId) {
   return this.clubs.get(clubId)
 }
}

将它们放在一起：

<Card 
 v-for="player in players"
 :key="player.id"
 :playerClub="getClubById(player.club_id)"
/>

我个人更喜欢这种方法，因为您只需要迭代一次玩家数组，而要获得一个特定的俱乐部则需要O(1)的时间复杂度。（Here就是这样）

如何访问自定义组件中的数据？

2 个答案: