如何正確格式化多級陣列的v-for回圈

我正在學習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>

有什么我可以做的不同的事情來正確回圈嗎？

uj5u.com熱心網友回復：

由于要迭代 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>

但是，由于您現在要顯示多個進球和助攻，您可能需要在表格中設定另一個“級別”來確定每個進球和助攻來自哪個統計資料。

uj5u.com熱心網友回復：

您需要回圈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>
             

標籤：javascript 数组 Vue.js

上一篇：很難弄清楚陣列操作背后的邏輯

下一篇：我的代碼中是否有任何泄漏，只有1個案例不起作用我不知道為什么？