Vue遍历数组对象

Question

我正在尝试使用数据循环遍历一些具有不同类别的数据，这看起来像这样：

10米

-2017
--姓名：cup1
--文件：file1.pdf
--姓名：cup2
--文件：file2.pdf
-2016
--姓名：cup1
--文件：file1.pdf
--姓名：cup2
--文件：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：有点难以解释，但看看这个 fiddle：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">

Vue遍历数组对象

Vue iterating though object of arrays

json

vue.js

vuejs2

v-for