如何在表格中显示 JSON 键 - VueJS答案

【问题标题】：How to display JSON keys in a table - VueJS如何在表格中显示 JSON 键 - 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

我的问题是如何引用属于第一列单元格的键名？当前代码仅生成第一列，其输出如下所示：

【问题讨论】：

标签： javascript json vue.js vuejs3

【解决方案1】：

你可以试试看https://bootstrap-vue.org/docs/components/table

在您的“数据”部分中，您可以定义“字段”（应具有 JSON 键的名称）。

通过创建 b-table :fields="yourFields" :options="yourJSON" 它将自动生成一个表。

【讨论】：