Vue implementation of JSONEditor
# npm npm install vue-jsoneditorimport Vue from 'vue'; import VJsoneditor from 'vue-jsoneditor'; import App from './App'; Vue.config.productionTip = false; Vue.use(VJsoneditor); /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App/>', components: { App }, });import VJsoneditor from 'vue-jsoneditor'; export default { name: 'app', components: { VJsoneditor, }, data() { return { json: { sucess: true, }, }; }, methods: { jsonChanged(value) { console.log(JSON.stringify(value)); }, }, };<template> <div id="app"> <v-jsoneditor v-model="json" @input="jsonChanged"> </v-jsoneditor> </div> </template>Don't forget to include jsoneditor API:
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.14.0/jsoneditor.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.14.0/jsoneditor.min.js"></script>