Vue.js 为 v-for 获取未知的 Json 密钥
Posted
技术标签:
【中文标题】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 是包中的这样一个名称,我想为其他上传的包制作这个模块化。以上是关于Vue.js 为 v-for 获取未知的 Json 密钥的主要内容,如果未能解决你的问题,请参考以下文章
在 vue js 中使用 v-for 在 div 内创建组件
在 Vue JS 中使用 v-for 为组件发送 props