json - Vue通过数组对象迭代

Question

我试图用不同类别的数据循环一些数据，看起来像这样：

10m

• -2017
• --名称：杯子1
• --文件：file1.pdf
• --名称：杯子2

• --文件：file2.pdf

• -2016

• --名称：杯子1
• --文件：file1.pdf
• --名称：杯子2
• --文件：file2.pdf

（然后在 15m 下也一样 - 但是我只能让它在 10m 下显示）

我的循环的问题是，它只显示在第一类（atm.“10m”）下

我正在使用 VueJS 来执行此操作。

var vm = new Vue({
  el: '#results',

  data: {
    results: [
  {
    "kategori": "10m",
    "year": [
      {
        "2017": [
          {
              "name": "stævne",
              "file": "pdf.pdf"
            },
             {
              "name": "stævne",
              "file": "pdf.pdf"
            }
        ],
        "2016": [
          {
              "name": "stævne",
              "file": "pdf.pdf"
            },
             {
              "name": "stævne",
              "file": "pdf.pdf"
            }
        ]
      }
    ]
  },
  {
    "kategori": "15m",
    "year": [{
        "2017": [
          {
              "name": "stævne",
              "file": "pdf.pdf"
            },
             {
              "name": "stævne",
              "file": "pdf.pdf"
            }
        ],
        "2016": [
          {
              "name": "stævne",
              "file": "pdf.pdf"
            },
             {
              "name": "stævne",
              "file": "pdf.pdf"
            }
        ]
      }
    ]
  }
]
,
  },

})

.category {
  font-weight: bold;
}

.year {
  margin-left: 5px;
  font-weight: normal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<main>
  <article id="results">
    <div v-for="(allCategory, index) in results" class="category">
      {{ allCategory.kategori }}
      <div v-for="(allYear, key) in results[index].year[index]" class="year">
        {{ key }}
      </div>
    </div>
  </article>
</main>

JSFiddle：https ://jsfiddle.net/tj5413om/

提前致谢

Answer 1

问题在于你的迭代index从 0 到 1：这有点难以解释，但看看这个小提琴：https ://jsfiddle.net/tj5413om/2/你会看到关键 0 和 1 替换了第二个循环，但是你的数据相同：

[ { "2016": [ { "name": "stævne", "file": "pdf.pdf" }, { "name": "stævne", "file": "pdf.pdf" } ], "2017": [ { "name": "stævne", "file": "pdf.pdf" }, { "name": "stævne", "file": "pdf.pdf" } ] } ]

这没有键 1：它只有一个数组；

所以替换你的第二个循环

<div v-for="(allYear, key) in results[index].year[index]" class="year">

至

 <div v-for="(allYear, key) in results[index].year[0]" class="year">