vue-json-editor

A json editor of vue.js

Component properties

v-model：bind the [json object] :show-btns: boolean, show the save button, default: true :expandedOnStart: boolean, expand the JSON editor on start for the modes 'tree', 'view', and 'form', default: false :mode: string, default: tree :lang: string, default: en @json-change: on json changed @json-save: on json save @has-error: on error

How to use

1. Install using npm

npm install vue-json-editor --save

2. Use vue-json-editor in the vue component

1<template>
2  <div>
3    <p>vue-json-editor</p>
4    <vue-json-editor v-model="json" :show-btns="true" :expandedOnStart="true" @json-change="onJsonChange"></vue-json-editor>
5  </div>
6</template>
7
8<script>
9  import vueJsonEditor from 'vue-json-editor'
10
11  export default {
12    data () {
13      return {
14        json: {
15          msg: 'demo of jsoneditor'
16        }
17      }
18    },
19
20    components: {
21      vueJsonEditor
22    },
23
24    methods: {
25      onJsonChange (value) {
26        console.log('value:', value)
27      }
28    }
29  }
30</script>