如何正确格式化多级数组的 v-for 循环答案

【问题标题】：how to properly format a v-for loop for multi-level array如何正确格式化多级数组的 v-for 循环
【发布时间】：2021-12-30 12:58:52
【问题描述】：

我正在学习 v-for 循环如何在 Vue 中工作。非常喜欢我可以直接在模板HTML 中运行循环但不确定如何正确使用 v-for 循环来深入研究多级数组的想法。

我有一个名为 playerDataList 的变量，它包含一些 JSON 数据。下面是一个示例

         "stats" : [ {
            "type" : {
            "displayName" : "yearByYear",
            "gameType" : null
            },
            "splits" : [ {
            "season" : "20052006",
            "stat" : {
                "assists" : 43,
                "goals" : 49,
                "pim" : 82,
                "games" : 62,
                "penaltyMinutes" : "82",
                "faceOffPct" : 0.0,
                "points" : 92
            },
            "team" : {
                "name" : "Lon. Jr. Knights",
                "link" : "/api/v1/teams/null"
            },
            "league" : {
                "name" : "Minor-ON",
                "link" : "/api/v1/league/null"
            },
            "sequenceNumber" : 1
            }, {
            "season" : "20062007",
            "stat" : {
                "assists" : 15,
                "goals" : 7,
                "pim" : 30,
                "games" : 62,
                "powerPlayGoals" : 0,
                "penaltyMinutes" : "30",
                "faceOffPct" : 0.0,
                "shortHandedGoals" : 0,
                "plusMinus" : 11,
                "points" : 22
            },
            "team" : {
                "id" : 1874,
                "name" : "Kitchener",
                "link" : "/api/v1/teams/1874"
            },
            "league" : {
                "id" : 141,
                "name" : "OHL",
                "link" : "/api/v1/league/141"
            },
            "sequenceNumber" : 1
            }, {
            "season" : "20072008",
            "stat" : {
                "assists" : 40,
                "goals" : 25,
                "pim" : 57,
                "games" : 68,
                "powerPlayGoals" : 10,
                "penaltyMinutes" : "57",
                "shortHandedGoals" : 0,
                "plusMinus" : 9,
                "points" : 65
            },
            "team" : {
                "id" : 1874,
                "name" : "Kitchener",
                "link" : "/api/v1/teams/1874"
            },
            "league" : {
                "id" : 141,
                "name" : "OHL",
                "link" : "/api/v1/league/141"
            },
            "sequenceNumber" : 1
            }
        }]

到目前为止，我已经得到了这段代码，它可以显示我的内容，但它只是第一个实例。它实际上并没有循环并给我每次出现。

         <div class="player-stats-card-inner">
            <p class="close" v-on:click='showPlayers = !showPlayers'>Close</p>
            <table>
              <th>
                <td>Goals</td>
                <td>Assists</td>
              </th>

              <!-- Loop through the JSON data -->
              <tr v-for="stats in playerDataList.stats" :key="stats.id">
                <td> 
                  {{stats.splits[0].stat.goals}}
                </td>
                <td>
                  {{stats.splits[0].stat.assists}}
                </td>
              </tr>
            </table>            
          </div>

我可以做些什么不同的事情来让这个正确循环吗？

【问题讨论】：

项目中没有id，所以使用v-for="(stats, index) in playerDataList.stats" :key="index"，然后如果你想循环拆分，添加另一个for循环并执行v-for="(stat, splits_index) in stats.splits" :key="splits_index"，然后是{{stat.goals}}等。只有 2 个基本循环

标签： javascript arrays vue.js

【解决方案1】：

由于要迭代 2 个数组，因此您需要 2 个 v-for 语句。由于您不想要 2 组 <tr> 元素，我们使用 <template> 不会在生成的 HTML 中呈现：

<!-- Loop through the JSON data -->
<template v-for="(stats, stats_index) in playerDataList.stats" :key="stats_index">
  <tr v-for="(split, split_index) in stats.splits :key="split_index">
    <td> 
      {{split.stat.goals}}
    </td>
    <td>
      {{split.stat.assists}}
    </td>
  </tr>
</template>

但是，由于您现在显示多个进球和助攻，您可能需要在表格中设置另一个“级别”来确定每个进球来自哪个统计数据。

【讨论】：

【解决方案2】：

您需要循环stat 的内部属性。它不是一个数组。

<tr v-for="stats in playerDataList.stats" :key="stats.id">
  <td v-for='(value, name) of stats.splits[0].stat'>
     {{name}} : {{value}}
  </td>
</tr>

【讨论】：

这只会为您提供splits 中第一个season 的结果，这可能是您需要的，也可能不是。
我做了一个快速调整来解决这个问题。但是这种格式最接近我的需要！所需的调整教会了我一些东西。对于将内部循环设置为v-for="(value,name) of stats.splits" :key="name" 的任何其他人。然后我可以像这样在循环中调用项目{{value.stat.goals}}
因为赛季是硬编码在0，我认为问题是迭代统计属性。