@kassaila/vue-json-editor v0.4.0

vue-json-editor

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

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

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