vue-json-editor简单实现main.js 中引⼊后挂载到 prototype
import jsoneditor from 'jsoneditor'
Vue.prototype.$jsoneditor = jsoneditor
那么在组件中直接可以拿到 jsoneditor 对象进⾏操作了
<template>
<div>
<div id="jsoneditor" ></div>
</div>
</template>
vue json字符串转数组
<script>
export default {
name: "JsonEditor",
/* eslint-disable vue/require-prop-types */
props: {
value: {
type: Object
}
},
data() {
return {
jsonEditor: null
};
},
watch: {
value(value) {
const editorValue = ();
if (value !== editorValue) {
this.jsonEditor.set(value);
}
}
},
mounted() {
this.initJsonEditor();
},
methods: {
// 初始化jsonEditor
initJsonEditor() {
var container = ElementById("jsoneditor");
var options = {
mode: "tree"
};
var editor = new this.$jsoneditor(container, options);
this.jsonEditor = editor;
},
/
/ 获取json
getValue() {
return ();
}
}
};
</script>
接下来就是直接在组件中引⼊
<JsonEditor :value="testdata"></JsonEditor>　
就能将组件的数据渲染到json editor 中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。