vue-json-editor json編輯器

1.安裝插件

npm install vue-json-editor --save

2.使用

<template>
  <div>
    <p>vue-json-editor</p>
    <vue-json-editor
    v-model="json" 
    :show-btns="true"  // 是否顯示保存按鈕
    :mode="'code'" // 默認編輯模式
    lang="zh"  // 顯示中文，默認英文
    @json-change="onJsonChange"  // 數據改變事件
    @json-save="onJsonSave" 
    @has-error="onError"></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);
        },
      onJsonSave (value) {
            console.log('value:', value);
        },
       onError (value) {
            console.log('value:', value);
        }
    }
  }
</script>

3.效果

4.參數補充

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