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 package from npm
:
npm i @kassaila/vue-json-editor
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>
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