Question

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

10M

-2017
- 姓名：cup1
- file：file1.pdf
- 姓名：cup2
- file：file2.pdf
-2016
- 姓名：cup1
- file：file1.pdf
- 姓名：cup2
- file：file2.pdf

（然后在15米以下相同 - 但我只能在10米以下显示）

我的循环问题是，它只显示在第一类（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

问题出在你的迭代里面[ { "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" } ] } ]从0变为1：它有点难以解释但是看看这个小提琴：https://jsfiddle.net/tj5413om/2/你会看到键0和1取代了第二个循环，但是你的数据是一样的：

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

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

所以从

替换你的第二个循环

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

到

RUN

Vue迭代数组的对象

1 个答案: