本文介绍了如何在Vue3项目中集成JsonEditor，包括通过npm安装、在模板中引用组件以及处理可能出现的报错。在main.js中引入jsoneditor库可以解决报错问题。此外，还展示了代码示例和最终页面展示。
首先安装
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";
最后出现的页面
今天的代码总结到此结束
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
