vue-json-editor json编辑器的使用及重复调用时遇到的一个小坑

1、安装插件

npm install vue-json-editor --save

2、使用

<div class = "routeManagement">
      <vue-json-editor
        v-model="prersonForm.data"
        :showBtns="true"  // 是否显示保存按钮
        :mode="'code'"  //默认显示编辑模式
        lang="zh"    // 显示中文，默认英文
        :key="keys"
        @json-change="onJsonChange"
        @json-save="onJsonSave"/>
    </div>

<script>
    import vueJsonEditor from 'vue-json-editor';
    data(){
       return {
          prersonForm: {
             formModule: 1,
             data: null,
           },
       }
    }
    components: {
       vueJsonEditor
    },
    
    methods: {
      onJsonChange (value) {
         console.log('value:', value);
      },
      onJsonSave (value) {
         console.log('value:', value);
      },
      onError (value) {
         console.log('value:', value);
      }
    }
</script>

显示效果如下：

使用就是如上使用就可以了

 

 

在做的时候，遇到一个小问题就是，我是有几个地方修改的时候，都会调用到这个JSON编辑器，每次传进来的内容都不一样，不修改的时候，点保存，onJsonSave传进来的value永远是第一次传进来的内容。我的理解是，编辑器没有重新初始内容导致的。所在我就加了一个key，如果key有变化的时候就重新初始一次，这样子就保证了每次onJsonSave传进来的value的内容都是正确的。

 

样式，可以自行调整

 

.routeManagement{
  width:98%;
  margin:16px auto;
  /deep/.jsoneditor-vue{
    height:500px;
  }
  /deep/.json-save-btn{
    margin-top: 10px;
    cursor: pointer;
    width: 100px;
    line-height: 30px;
    font-size: 14px;
  }
}