Vue.js获得未知的JSON密钥for v-for

Question

我构建了一个代码分析工具，并且我想在vue表中设置我的json数据。但是，我需要json Key，它是我想要显示的数据的目录的Package/File名称。

这里是JSON部分（NULLY是包）：

"folderStatistics": { 
      "NULLY": { 
      "Statistiken": { 
       "Werte": { 
       "Felder": "0", 
       "Konstruktoren": "0", 
       "Methoden": "8", 
       "Klassen": "1", 
       "Codezeilen": "191" 
       } 
      }, 

，这是我的HTML：

<table class="table table-bordered"> 
     <thead> 
     <tr> 
     <th></th> 
     <th>Felder</th> 
     <th>Konstruktoren</th> 
     <th>Methoden</th> 
     <th>Klassen</th> 
     <th>Codezeilen</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr v-for="value in folderStatistics.NULLY.Statistiken"> 
     <td>{{$key}}</td> 
     <td>{{value.Felder}}</td> 
     <td>{{value.Konstruktoren}}</td> 
     <td>{{value.Methoden}}</td> 
     <td>{{value.Klassen}}</td> 
     <td>{{value.Codezeilen}}</td> 
     </tr> 
     </tbody> 

随着 “NULLY”，它的作品目录，但NULLY应动态。 我该如何做到这一点？它甚至工作吗？

Answer 1

documentation

你可以在一个变量NULLY说package，并用它在视图类似以下内容：

<tbody> 
    <tr v-for="(value, key) in folderStatistics[package].Statistiken"> 
    <td>{{key}}</td> 
    <td>{{value.Felder}}</td> 
    <td>{{value.Konstruktoren}}</td> 
    <td>{{value.Methoden}}</td> 
    <td>{{value.Klassen}}</td> 
    <td>{{value.Codezeilen}}</td> 
    </tr> 
    </tbody> 

演示fiddle。