vue 使用jsoneditor，来格式化数据

git地址

https://github.com/josdejong/jsoneditor

1. 首先下载

npm install jsoneditor

2. 页面引入

<template>
  <div>
    <div id="jsoneditor" style="width: 100%; height: 300px;"></div>
  </div>
</template>
 
<script>
#引入 jsoneditor
import jsoneditor from 'jsoneditor'
export default {
  name: "JsonEditor",
  /* eslint-disable vue/require-prop-types */
  props: {
    value: {
      type: Object
    }
  },
  data () {
    return {
      jsonEditor: null
    };
  },
  watch: {
    value (value) {
      const editorValue = this.jsonEditor.get();
      if (value !== editorValue) {
        this.jsonEditor.set(value);
      }
    }
  },
  mounted () {
    this.initJsonEditor();
  },
  methods: {
    // 初始化jsonEditor
    initJsonEditor () {
      var container = document.getElementById("jsoneditor");
      var options = {
        mode: 'view',
        modes: ['code','view', 'tree', 'preview'], // allowed modes
        error: function (err) {
          alert('EF1 ->' + err.toString());
        }
      };
      var editor = new jsoneditor(container, options);
      this.jsonEditor = editor;
    },
    // 获取json
    getValue () {
      return this.jsonEditor.get();
    }
  }
};
</script>

3. 在main.js 中引入 css 文件

import "jsoneditor/dist/jsoneditor.min.css";

end 大功告成