在一个可折叠的树中显示JSON的教程

一个Vue 3 JSON查看器组件，在一个可折叠的树中显示JSON。

如何使用它。

1.安装并注册JSON查看器。

import { defineComponent, reactive } from "vue";
import { JsonTreeView } from "json-tree-view-vue3";

export default defineComponent({
  components: { JsonTreeView }
});

2.2.从JSON文件渲染一个基本的树。

<template>
  <JsonTreeView :data="state.json" :maxDepth="3" />
</template>

export default defineComponent({
  components: { JsonTreeView },
  setup() {
    const state = reactive({
      json: `{"string":"text","number":123,"boolean":true,"array":["A","B","C"],"object":{"prop1":"value1","nestedObject":{"prop2":"value2"}}}`
    });
    return {
      state
    };
  }
});

3.可用的组件道具。

data: {
  type: String,
  required: false,
},
rootKey: {
  type: String,
  required: false,
  default: "/",
},
maxDepth: {
  type: Number,
  required: false,
  default: 1,
},
colorScheme: {
  type: String,
  required: false,
  default: "light",
  validator: (value: string) => ["light", "dark"].indexOf(value) !== -1,
},

4.当一个项目被选中时触发一个事件。

• @selected(event: {key: string, value: unknown, path: string})

更新日志。

v0.2.0 (09/28/2022)

• 更新内容

The postDisplay JSON In A Collapsible Treeappeared first onVue Script.