json data conversion tool-js

JSON data conversion

js plugin:
https://github.com/josdejong/jsoneditor

Use in vue:
1. Download

npm install jsoneditor

auditLog.vue:
Write a div with the id "jsoneditor" in vue, and the component will be displayed in this div

<div id="jsoneditor" style="width: 50%; height: 500px"></div>

auditLog.js:
I wrote detailDialog in the pop-up window, and visible is to open the pop-up window, which can be ignored.
First, introduce the js and css of the component
through document.getElementById to find the div new named jsoneditor. Put the data in
a JSONEditor object initialJson and finally edit the editor .set out

//详情弹窗
let visible = ref(false)
const detailDialog = () => {
    
    
    visible.value = true
    setTimeout(() => {
    
    
        let JSONEditor = require("jsoneditor/dist/jsoneditor.js")
        require("jsoneditor/dist/jsoneditor.min.css")
        console.log(JSONEditor)
        const container = document.getElementById("jsoneditor")
        const options = {
    
    }
        const editor = new JSONEditor(container, options)

        // set json
        const initialJson = {
    
    
            "Array": [1, 2, 3],
            "Boolean": true,
            "Null": null,
            "Number": 123,
            "Object": {
    
    
                "a": "b",
                "c": "d"
            },
            "String": "Hello World"
        }
        editor.set(initialJson)

        // get json
        const updatedJson = editor.get()
    }, 300)
}