Vue Annotated JSON Tree View

This is an extension of vue-json-tree-view to support "Annotated JSON".

JSON is pure data. Annotated JSON is a little extension that uses convention to add additional information into it.
Common usages include:
* comment
* hint for presentation (e.g. different colors for different sections)

Annotated JSON does not change tree structure, it modifies key in place instead. For example, if this is an original JSON:
``javascript
{"k": "v"}
`

The annotated one may look like this:
`javascript
{"@k(class='red', comment='example')": "v"}
`

And that is it. If you are building a parser yourself, annotated key always starts with '@' and is followed by a parentheses with HTML-style attributes inside. If you strip them, it will be back to the original JSON.

This format is not governed by any committee. I just found it useful in many of my projects for keeping track of changes of a JSON document (building JSON diff for example).

Below are the original README:

Vue JSON Tree View

!a demonstration




Demo and Blogpost

You can check out the demo on JSFiddle and read the Blogpost called Building a JSON Tree View Component in Vue.js from Scratch in Six Steps that lead to the creation of this library.

Installation

Install the plugin with npm:
`shell
npm install --save vue-json-tree-view
`

Then, in your Application JavaScript, add:
`javascript
import TreeView from "vue-json-tree-view"
Vue.use(TreeView)
`

Done.

Usage

Put the tree-view element into your HTML where you want the Tree View to appear.
`html



`

Props

#### data

The JSON to be displayed. Expects a valid JSON object.

#### options

The defaults are:
`
{
maxDepth: 4,
rootObjectKey: "root",
modifiable: false
}
`
- maxDepth: The maximum number of levels of the JSON Tree that should be expanded by default. Expects an Integer from 0 to Infinity.
- rootObjectKey: the name of the Root Object, will default to root
- modifiable: To modify the json value.

Event

#### updated json data
If modifiable is true and you want to take the updated json data, you must register event handler as v-on:change-data=.... Only one argument is passed that is updated data - data.
`html


// in your vue code
...
methods: {
onChangeData: function(data) {
console.log(JSON.stringify(data))
}
},
...

`




Custom Styling

All leaves will have their type indicated as a CSS class, like tree-view-item-value-string. Supported types: String, Number, Function, Boolean and Null Values.

Notes

Enjoy.

Changelog

- 2.0.0: Moved prop based option into options` object. Added CSS for leaf types. Support for raw values as data.
- 1.0.0: Initial Release