Vue JSON可视化编辑器组件（vue-json-edit）

 website 下载

介绍

vue-json-edit是一款可视化Vue.js的JSON编辑器组件。

使用方法

1.导入vue-json-edit组件并注册。

import Vue from 'vue'
import JsonEditor from 'vue-json-edit'

Vue.use(JsonEditor)

new Vue({
  el: '#app',
  render: h => (h)(App)
})

2.添加组件。

<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>