多个对象数组的多个 v-for - 使用相同的索引

Question

我有两个不同的道具被传递到我的组件。道具是对象数组。虽然此数组中的数据不同，但一个数组中 0 索引中的数据与另一个数组中的 0 相关。

您在我的 generalGame 道具中（在索引 0 处）可以看到的数据与您在我的 specificGame 道具中找到的数据相关，同样在索引 0

如您所见，gameId 相同，但我得到了更多信息。

目前我有：

<ul>
    <li v-for="(games, index) in generalGame" v-bind:key="generalGame" class="card">

        <img :src="getChampImage(specificGame[index].champion)">
         // This specificGame is the first image shown


         <p> {{ games.participantIdentities[index].player.summonerName }}</p>

     </li>
</ul>

My Props are 

 props: ['generalGame', 'specificGame'],

这会输出第一张图片中的冠军和第二张图片中仅位于 participantIdentities 中的一名玩家。

如何在保持在同一索引上的同时从 participantIdentities 获取所有数据？

Answer 1

你有一个数组，这个数组的每一项都包含一个数组。为了访问嵌套数组的所有元素，您需要在迭代期间进行迭代。

假设您有一个包含 3 个项目的数组并且您想要遍历它。它看起来像这样：

iteration 1 -> iteration 2 -> iteration 3

现在假设每个项目都有一个包含 2 个项目的数组，并且您想要遍历所有这些项目。它看起来像这样：

i1           -> i2           -> i3
i1.1 -> i1.2    i2.1 -> i2.2    i3.1 -> i3.2

每次迭代一个项目时，都会创建另一个循环，嵌套在第一个循环中。在迭代 i1 期间，您先执行迭代 i1.1，然后执行 i1.2。

在 JS 中，这个嵌套迭代看起来像这样：

for (let index1 = 0; index1 < 3; index1++) {
    for (let index2 = 0; index2 < 3; index2++) {
        // do stuff
    }
}

games.participantIdentities[index]是数组games.participantIdentities的迭代，games是数组generalGame.

的迭代

访问每个 participantIndentity 将如下所示：

<p
    v-for="(participantIdentity, participantIdentityIndex) in games.participantIdentities"
    v-bind:key="participantIdentityIndex"
>
    {{ participantIdentity.player.summonerName }}
</p>

多个对象数组的多个 v-for - 使用相同的索引

Multiple v-for for multiple arrays of objects - using the same index

javascript

ecmascript-6

vue.js