v-jsoneditor

Vue JSONEditor

Try the demo

https://yansenlei.github.io/VJsoneditor/

Installation

1npm install v-jsoneditor

Using

Import globally

1import Vue from 'vue'
2import VJsoneditor from 'v-jsoneditor'
3
4Vue.use(VJsoneditor)

Import

1import VJsoneditor from 'v-jsoneditor'
2
3export default {
4    name: 'app',
5    components: {
6        VJsoneditor
7    },
8    data() {
9        return {
10            json: {
11                "hello": "vue"
12            }
13        }
14    },
15    methods: {
16        onError() {
17            console.log('error')
18        }
19    }
20}

Browser

1<script src='https://unpkg.com/vue@latest'></script>
2<script src="./dist/v-jsoneditor.min.js"></script>

Use in template

1<v-jsoneditor v-model="json" :options="options" :plus="false" height="400px" @error="onError">

Options

Name	Description	type	default
options	Jsoneditor params, You can look at the detailed configuration	Object	{ mode: 'code' }
value(v-model)	Object value	Object	{ }
plus	Whether full screen switching is added	Boolean	true
height	Default height	String	-

Events

Name	Description
error	Error callback

Build Setup

1# install dependencies
2npm install
3
4# serve with hot reload at localhost:8080
5npm run dev
6
7# build for production with minification
8npm run build