javascript - Vue.js 获取 v-for 的未知 Json key

Question

我构建了一个代码分析工具，我想在 vue 表中设置我的 json 数据。但是，我需要 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 并在 View 中使用它，如下所示:

 <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 .