vue-json-editor

JSON visual editor - built as a Vue.js component. Provides a basic GUI

Current package version work with Vue.js 2. Support for Vue.js 3 is not yet planned.

Please preview - demo example

Install

Install package from npm:

npm i @kassaila/vue-json-editor

Usage

Single file component

<template>
  <json-editor :data-input="dataInput" @data-output="(data) => (dataOutput = data)"> </json-editor>
</template>
<script>
  import JsonEditor from '@kassaila/vue-json-editor';

  export default {
      ...
      components: {
        JsonEditor,
      },
      data() {
          return {
              dataInput: {
                name: 'Taras',
                age: 28,
                address: [
                  'Ukraine',
                  {
                    city: 'Kharkiv',
                  },
                ],
                others: {
                  id: 1246,
                  time: new Date(),
                  description: 'last example run',
                  pattern: /abc/g,
                },
              },
              dataOutput: {},
          };
      },
  }
</script>

Capability

Name	Options	Type	Required	Description
data-input	props	Object, Array, String, Number, Boolean, Null, Date, RegExp, Function	true	Input data
options	props	Object	false	Reserved (now empty)
data-output	event	Object, Array, String, Number, Boolean, Null	-	Output data, return modified data
icon-add	slot	<template>	false	Icon for button - add new item
icon-delete	slot	<template>	false	Icon for button - delete item
icon-drag	slot	<template>	false	Icon for dragbar
icon-collapse	slot	<template>	false	Icon for button - collapse object list

For some types of the data, like Date, RegExp, Function will be applied transformation to string (by the method .toString())

This is a modified version of the fork vue-json-edit