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

Posted 2023-02-23

【中文标题】Vue.js 为 v-for 获取未知的 Json 密钥

【英文标题】：Vue.js get unknown Json key for v-for

【发布时间】：2017-06-03 03:15:35

【问题描述】：

我构建了一个代码分析工具，我想将我的 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 应该是动态的。 我怎样才能做到这一点？它甚至可以工作吗？

【参考方案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.

【讨论】：

是的，但是 NULLY 是包中的这样一个名称，我想为其他上传的包制作这个模块化。