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。