Vue iterating though object of arrays

Question

Im trying to loop through some data with different categories with data, that would look something like this:

10m

• -2017
• --name: cup1
• --file: file1.pdf
• --name: cup2

• --file: file2.pdf

• -2016

• --name: cup1
• --file: file1.pdf
• --name: cup2
• --file: file2.pdf

(and then the same under 15m - however i can only make it show under 10m)

The problem with my loop is, that it only shows under the first category (atm. "10m")

I'm using VueJS to do this.

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/

Thanks in advance

Answer 1

The problem is inside your iteration index goes from 0 to 1: it's kinda hard to explain but look at this fiddle: https://jsfiddle.net/tj5413om/2/ and you will see key 0 and 1 replace second loop from, but your data is the same:

[ { "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" } ] } ]

This does not have key 1: It's only one array;

so replace your second loop from

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

to

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