如何在表格中显示 JSON 键 - VueJS
Posted
技术标签:
【中文标题】如何在表格中显示 JSON 键 - VueJS【英文标题】:How to display JSON keys in a table - VueJS 【发布时间】:2021-09-18 01:59:02 【问题描述】:我正在使用 VueJS 创建前端:
<template>
<div>
<h1>My JSON</h1>
<table>
<tr v-for="b in jsondata['techniques'][0]['program']" :key="b.id">
<td>Object.keys(b)</td>
<!-- <td v-for="check in folder.checks">
check.name
</td> -->
</tr>
</table>
</div>
</template>
<script>
import cycleDescriptionData from '@/myjson.json'
export default
name: 'myJSON',
data()
return
jsondata: cycleDescriptionData,
userInput: this.jsondata
;
,
;
</script>
我要显示的 JSON 在这里:https://jsoneditoronline.org/#left=cloud.55f0755dbad64a7b95f1ab0725bd6a49&right=local.kaheka。
我的目标是用以下格式编写表格的每一行:
单元格 1:密钥名称(在 object['techniques'][0]['program'] 下,例如:Is 单元格 2:键“I”下的值 单元格 3:键“I.1”下的值所以表格的第一行看起来像:
是 | 0.000 | -250.000
我的问题是如何引用属于第一列单元格的键名?当前代码仅生成第一列,其输出如下所示:
【问题讨论】:
【参考方案1】:你可以试试看https://bootstrap-vue.org/docs/components/table
在您的“数据”部分中,您可以定义“字段”(应具有 JSON 键的名称)。
通过创建 b-table :fields="yourFields" :options="yourJSON" 它将自动生成一个表。
【讨论】:
以上是关于如何在表格中显示 JSON 键 - VueJS的主要内容,如果未能解决你的问题,请参考以下文章