vue-json-tree
vue-json-tree
Vue component that renders JSON data in a collapsible tree structure.
usage
use in browsers
- Include the CSS and JS along with Vue, so you get a
<json-tree>
component.
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/json-tree.js"></script>
- Instantiate the component with your data.
<div id="app"></div>
<script>
new Vue({
template: '<json-tree :raw="sample"></json-tree>',
el: '#app',
data: {
sample: '{"foo": "bar"}'
}
})
</script>
use with webpack and vue-loader
- Install the
vue-json-tree
package via NPM.
npm install --save vue-json-tree
- Import the SFC (with CSS embedded) and register it as a component, either globally or in another component.
import JsonTree from 'vue-json-tree'
Vue.component('json-tree', JsonTree)
props
raw
(string
, optional)
The data you want to present in the tree view. Must be a valid JSON string, otherwise it fails.
data
(any
, optional)
If your JSON data has already been parsed, bind this one instead. Must be something that can be produced by JSON.parse()
.
level
(number
, optional)
Sometimes the data structure is very deep. You could set them to collapsed on load. By default all levels are expanded.
demo
https://myst729.github.io/vue-json-tree/
MIT © Leo
Dependencies
@babel/core: ^7.9.0@babel/preset-env: ^7.9.5babel-loader: ^8.1.0chai: ^4.2.0css-loader: ^3.5.3karma: ^5.0.2karma-chai: ^0.1.0karma-chrome-launcher: ^3.1.0karma-mocha: ^2.0.0karma-mocha-reporter: ^2.2.5karma-webpack: ^4.0.2mocha: ^7.1.2terser-webpack-plugin: ^2.3.6vue: ^2.6.11vue-loader: ^15.9.1vue-style-loader: ^4.1.2vue-template-compiler: ^2.6.11webpack: ^4.43.0webpack-cli: ^3.3.11