Vue итерация через объект массивов

Я пытаюсь перебрать некоторые данные с разными категориями с данными, которые будут выглядеть примерно так:

10m

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

  • --file: file2.pdf

  • -2016

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

(а потом то же самое до 15 м, но я могу показать его только под 10 м)

Проблема с моим циклом в том, что он отображается только в первой категории (атм. «10 м»).

Для этого я использую 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/

заранее спасибо


json vue.js vuejs2 v-for
person Carsten Andersen    schedule 08.12.2017    source источник
comment
Так в чем проблема. Есть ли у вас ожидаемый результат?   -  person samayo    schedule 08.12.2017
comment
Однако мне трудно объяснить, поскольку в данных годы (2017 и 2016) должны быть меньше 15 и 10 месяцев. Однако петля записывает его только ниже 10 м.   -  person Carsten Andersen    schedule 08.12.2017
comment
Так что в основном. Он должен писать точно так же под 15 м, что и под 10 м прямо сейчас. jsfiddle.net/tj5413om/1   -  person Carsten Andersen    schedule 08.12.2017

Ответы (1)


arrow_upward
2
arrow_downward

Проблема в вашей итерации 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">

to 

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