G Json View

A Vue component for rendering JSON data as a tree structure.

It supports Vue3 at least.

English | 简体中文

Features

• As a JSON Formatter.
• ...

Using NPM or Yarn

$ npm install g-json-view --save

$ yarn add g-json-view

Usage

<template>
  <div>
    <g-json-view :json="{ key: 'value' }" />
  </div>
</template>

<script>
import GJsonView from 'g-json-view';

export default {
  components: {
    GJsonView,
  },
};
</script>

Props

Property	Description	Type	Default
json	JSON data	JSON object	-
deep	Paths greater than or equal to this depth will be collapsed	number	4
showLength	Show the length when collapsed	boolean	true
showLine	Show the line	boolean	true
showIcon	Show the icon	boolean	true
showDoubleQuotes	Show doublequotes on key	boolean	true
rootPath	Root data path	string	root
collapsedOnClickBrackets	Support click brackets or text to collapse	boolean	true
renderNodeKey	render node key	({ node, defaultKey }) => vNode	-
renderNodeValue	render node value	({ node, defaultValue }) => vNode	-
nodeClick	triggered when a node is clicked	({ isClosed, path }) => void	-

Events

Event Name	Description	Parameters
nodeClick	triggers when click node	(node: NodeData)

Contributors