@kassaila/vue-json-editor
v0.4.0
Published
JSON visual editor - built as a Vue.js component
Downloads
130
Maintainers
Readme
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
| 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