Vue.js 为 v-for 获取未知的 Json 密钥

Question

我构建了一个代码分析工具，我想将我的 json 数据设置在一个 vue 表中。但是，我需要 json 键，它是要显示数据的目录的包/文件名。

这里是 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.