A simple way to use the Vue-Json-Edit

Vue-JSON-edit is the component for Vue.js which is used to create an attractive user interface. It is the Best editor for GUI. Vue-Json-Edit would allow you to edit an array of objects easily.

Documentation Check on GitHub

Features

• objData: JSON data
• options
  • confirm text: strings of the confirm button
  • cancel Text: strings of the cancel button

Constructor

JSONEditor(container [, options [, json]])

Constructs a new JSONEditor.

Parameters:

• {Element} container An HTML DIV element. The JSONEditor will be created inside this container element.
• {Object} options Optional object with options. The available options are described under Configuration options.
• {JSON} json Initial JSON data to be loaded into the JSONEditor. Alternatively, the method JSONEditor.set(json) can be used to load JSON data into the editor.

Installation

npm install vue-json-edit --save

Usage

//import it in your project At your entry point

import Vue from 'vue'
import JsonEditor from 'vue-json-edit'
  
Vue.use(JsonEditor)

Example

Single file component

<template>
    <JsonEditor
        :options="{
            confirmText: 'confirm',
            cancelText: 'cancel',
        }"
        :objData="jsonData" 
        v-model="jsonData" >
    </JsonEditor>
</template>
<script>
export default {
    ...
    data: function() {
        return {
            jsonData: {
                name: 'mike',
                age: 23,
                phone: '18552129932',
                address: ['AAA C1', 'BBB C2']
            }
        }
    }
}
</script> 

JSONEditor.refresh()

Force the editor to refresh the user interface and update all rendered HTML. This can be useful for example when using onClassName and the returned class name depends on external factors.

JSONEditor.set(json)

Set JSON data. Resets the state of the editor (expanded nodes, search, selection). See also JSONEditor.update(json).

Parameters:

• {JSON} jsonJSON data to be displayed in the JSONEditor.

JSONEditor.setMode(mode)

Switch mode. Mode code requires the Ace editor.

Parameters:

• {String} modeAvailable values: tree, view, form, code, text, preview.

JSONEditor.setName(name)

Set a field name for the root node.

Parameters:

• {String | undefined} nameField name of the root node. If undefined, the current name will be removed.

JSONEditor.setSchema(schema [,schemaRefs])

Set a JSON schema for validation of the JSON object. See also option schema. See http://json-schema.org/ for more information on the JSON schema definition.

Parameters:

• {Object} schemaA JSON schema.
• {Object} schemaRefsOptional, Schemas that are referenced using the $ref property from the JSON schema, the object structure in the form of {reference_key: schemaObject}

JSONEditor.setSelection(start, end)

Set selection for a range of nodes, Only applicable for mode ‘tree’.

• If no parameters sent – the current selection will be removed, if exists.
• For single node selecion send only the start parameter.
• If the nodes are not from the same level the first common parent will be selected

Parameters:

• {path: Array.<String>} startPath for the start node
• {path: Array.<String>} endPath for the end node

JSONEditor.setText(jsonString)

Set text data in the editor.

This method throws an exception when the provided jsonString does not contain valid JSON and the editor is in mode tree, view, or form.

Parameters:

• {String} jsonStringContents of the editor as string.

JSONEditor.setTextSelection(startPos, endPos)

Set text selection for a range, Only applicable for mode ‘text’ and ‘code’.

Parameters:

• {row:Number, column:Number} startPosPosition for selection start
• {row:Number, column:Number} endPosPosition for selection end

Static properties

• {string[]} JSONEditor.VALID_OPTIONSAn array with the names of all known options.
• {object} aceAccess to the bundled Ace editor, via the brace library. Ace is used in code mode. Same as var ace = require('brace');.
• {function} AjvAccess to the bundled ajv library, used for JSON schema validation. Same as var Ajv = require('ajv');.
• {function} VanillaPickerAccess to the bundled vanilla-picker library, used as color picker. Same as var VanillaPicker = require('vanilla-picker');.

Examples

A tree editor:

var options = {
    "mode": "tree",
    "search": true
};
var editor = new JSONEditor(container, options);
var json = {
    "Array": [1, 2, 3],
    "Boolean": true,
    "Null": null,
    "Number": 123,
    "Object": {"a": "b", "c": "d"},
    "String": "Hello World"
};
editor.set(json);
editor.expandAll();

var json = editor.get(json);

A text editor:

var options = {
    "mode": "text",
    "indentation": 2
};
var editor = new JSONEditor(container, options);
var json = {
    "Array": [1, 2, 3],
    "Boolean": true,
    "Null": null,
    "Number": 123,
    "Object": {"a": "b", "c": "d"},
    "String": "Hello World"
};
editor.set(json);

var json = editor.get();

JSON parsing and stringification

In general, to parse or stringify JSON data, the browsers built in JSON parser can be used. To create a formatted string from a JSON object, use:

var formattedString = JSON.stringify(json, null, 2);

to create a compacted string from a JSON object, use:

var compactString = JSON.stringify(json);

To parse a String to a JSON object, use:

var json = JSON.parse(string);