首先安装

npm install json-editor-vue3 --save

然后cv代码

<template>

  <div><JsonEditorVue class="editor" v-model="data" @blur="validate" /></div>

</template>

<script>

import { ref } from "vue";

import JsonEditorVue from 'json-editor-vue3'

export default {

  components: { JsonEditorVue },

  setup () {

    const data = ref({ key: "key", value: "value" });

    const validate = async (editor) => {

      const res = await editor.validate();

      // res 是错误列表，如果是空数组，则表示检测没有错误

      console.log(res);

    };

    return {

      data,

      validate,

    };

  },

};

</script>

 中途可能会出现报错

解决办法

 在main.js顶部加上 import "jsoneditor";

最后出现的页面

今天的代码总结到此结束