Visual JSON Editor built as an vue component. Provides a basic GUI
npm install vue-json-edit --save
//import it in your project At your entry point
import Vue from 'vue'
import JsonEditor from 'vue-json-edit'
Vue.use(JsonEditor)
Single file component
<template>
<JsonEditor
:options="{
confirmText: 'confirm',
cancelText: 'cancel',
}"
:objData="jsonData"
v-model="jsonData" >
</JsonEditor>
</template>
<script>
export default {
...
data: function() {
return {
jsonData: {
name: 'mike',
age: 23,
phone: '18552129932',
address: ['AAA C1', 'BBB C2']
}
}
}
}
</script>
Author: jinkin1995
Demo: https://jinkin1995.github.io/vue-json-edit/
Source Code: https://github.com/jinkin1995/vue-json-edit
#vuejs #vue #javascript