vue-json-editor

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

<template>
  <div>
    <p>vue-json-editor</p>
    <vue-json-editor v-model="json" :show-btns="true" :expandedOnStart="true" @json-change="onJsonChange"></vue-json-editor>
  </div>
</template>

<script>
  import vueJsonEditor from 'vue-json-editor'

  export default {
    data () {
      return {
        json: {
          msg: 'demo of jsoneditor'
        }
      }
    },

    components: {
      vueJsonEditor
    },

    methods: {
      onJsonChange (value) {
        console.log('value:', value)
      }
    }
  }
</script>