json-vue-er

json-vue-er, a JSON viewer component in Vue.js.

THIS PACKAGE IS NO LONGER MAINTAINED. CONSIDER USING jp-tree, https://www.npmjs.com/package/@satachito/jp-tree

• No external resources.
• Very fast. There is no data conversion inside.
• Ultra small. Easy to understand and modify.

Installation

With npm:

npm install json-vue-er --save

In script tag

import JsonVueEr from "json-vue-er"

Sample

See 'sample' directory in the package.

Simple one:

export default {
  components: { JsonVueEr }
, template: '<json-vue-er :json="{ a: 1, b: 2 }"></json-vue-er>'
}

Comprehensive one:

export default {
  components: { JsonVueEr }
, data(){ return { json: "{ a: 1, b: [ 'A', 'B' ], c: [ 'A', 'B', 'C' ], d: [ 'A', 'B', 'C', 'D' ] }", depth: 0 } }
, template: `
    <div>
      DEPTH:<input v-model="depth" /><br />
      <json-vue-er 
        :json="json"
        :name="(root)"
        :max-depth="depth"
      >
      </json-vue-er>
    </div>
  `
}

Props

json - The JSON to be displayed. Expects a valid JSON object.
name - The name of the root object.
max-depth - The maximum level of the JSON Tree to be expanded. Specify 0 to Infinity.
current-depth - Don't care. Current expantion level of the JSON tree.

Changelog

• 1.0.0: Initial Release

• 1.1.3: Minor house keeping

• 1.1.4: Minor house keeping

• 1.1.5: Remove vulnerable dependency in sample directory.

• 1.1.6: LAST VERSION