https://github.com/fitzhavey/vue-json-tree-view

A JSON Tree View Component for Vue.js
https://github.com/fitzhavey/vue-json-tree-view

javascript javascript-library json-tree tree vue vue-json-tree vuejs vuejs2

Last synced: about 2 months ago
JSON representation

A JSON Tree View Component for Vue.js

• Host: GitHub
• URL: https://github.com/fitzhavey/vue-json-tree-view
• Owner: fitzhavey
• License: mit
• Created: 2017-02-17T10:01:14.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-26T10:27:33.000Z (6 months ago)
• Last Synced: 2024-05-29T03:12:13.067Z (4 months ago)
• Topics: javascript, javascript-library, json-tree, tree, vue, vue-json-tree, vuejs, vuejs2
• Language: Vue
• Homepage: https://devblog.digimondo.io/building-a-json-tree-view-component-in-vue-js-from-scratch-in-six-steps-ce0c05c2fdd8#.dkwh4jo2m
• Size: 1.53 MB
• Stars: 474
• Watchers: 9
• Forks: 80
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - fitzhavey/vue-json-tree-view - A JSON Tree View Component for Vue.js (Vue)

README

        
# Vue JSON Tree View

![a demonstration](https://raw.githubusercontent.com/arvidkahl/vue-json-tree-view/master/header.png)

## Demo and Blogpost

You can check out the [demo](https://jsfiddle.net/arvidkahl/kwo6vk9d/11/) on JSFiddle and read the Blogpost called [Building a JSON Tree View Component in Vue.js from Scratch in Six Steps](http://brianyang.com/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,

  link: false,

  limitRenderDepth: 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"`).

- limitRenderDepth: maximum number of nodes that should be rendered (for very large JSONs)

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

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

```

.tree-view-item-key {

    color: red;

}

```

## Contributing

Contributions to this repo are very welcome as they are what has helped it become what it is today. Simply raise an issue with new ideas or submit a pull request.

A github action automatically deploys changes when they are merged into the master branch.