Vueyytree NPM | npm.io

Vueyytree from Vue JSON Tree View

a demonstration

This is an object forked from Arivid Kahl.

The only purpose is to remove lodash and Phantom dependency. But Babel 2015 preset is updated according to Babel guide. Use it at your own risk!

A minor functionality is added that user can define a onItemClick function in options property when declare new TreeView. Enjoy!

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:

npm install --save vueyytree

Then, in your Application JavaScript, add:

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.

<div>
  <tree-view :data="jsonSource" :options="{maxDepth: 3}"></tree-view>
</div>

Props

`data`

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

`options`

The defaults are:

{
  maxDepth: 4,
  rootObjectKey: "root",
  modifiable: false,
  link: 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.
link: URL strings will appear as clickable links (unless modifiable="true").

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.

<div>
  <tree-view :data="jsonSource" :options="{modifiable: true}" @change-data="onChangeData"></tree-view>
</div>

// 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.

Keys can also be styled. For instance to make labels red: