首先安装
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";
最后出现的页面
今天的代码总结到此结束